Add a gradient overlay

[Illyism]

For ogimage.org I included this example with a gradient overlay

Code

It's as simple as adding the absolute div with a linear-gradient background.

return new ImageResponse(
    (
      <div tw="flex flex-col items-center justify-end w-full h-full">
        <img src={image} alt="" width={width} height={height} />
        <div
          tw="absolute left-0 bottom-0 h-2/3 w-full"
          style={{
            background:
              "linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)",
          }}
        ></div>
        {title && (
          <h1 tw="absolute bottom-8 inset-x-8 font-black text-5xl text-white tracking-tight leading-none">
            {title}
          </h1>
        )}
      </div>
    ),
    {
      width,
      height,
      fonts: [
        {
          name: "Satoshi",
          data: satoshi,
        },
      ],
    },

• PR: https://github.com/Illyism/ogimage.org/pull/1

• Code: https://github.com/Illyism/ogimage.org/blob/9fdeb9c0b5e0f3da8eac45aad4ee0425f0b06b12/templates/overlay-title/index.tsx

Examples

example.mp4