custom gradient in tailwindcss

[mzulfanw]

hi guys, i have issues when added customize gradient colors at my side, the gradient seems not work

:root { --axora: linear-gradient(101.98deg,oklch(0.53 0.25 259) 41.25%,oklch(0.75 0.19 194) 130.18%); }

@theme inline { --color-axora: var(--axora) }

[wongjn]

--color-<name> is for <color> CSS values. linear-gradient would be a <gradient>, a special type of <image>. Either case is invalid as a color. For example, with your config:

:root {
  --axora: linear-gradient(101.98deg,oklch(0.53 0.25 259) 41.25%,oklch(0.75 0.19 194) 130.18%);
}

@theme inline {
  --color-axora: var(--axora);
}

Doing:

<div class="text-axora">

Would result in:

.text-axora {
  color: var(--axora);
}

Which is like:

.text-axora {
  color: linear-gradient(101.98deg,oklch(0.53 0.25 259) 41.25%,oklch(0.75 0.19 194) 130.18%);
}

This is invalid CSS and hence would not do anything.

[mzulfanw]

thanks for the explanation mate @wongjn

[rozsazoltan]

Undocumented, but custom gradients are accepted in the --background-image-* namespace, which can then only be used with the bg-* utility.

• backgroundImage in tailwind.config.js not working after upgrade to TailwindCSS v4

@theme {
  --background-image-custom: linear-gradient(101.98deg,oklch(0.53 0.25 259) 41.25%,oklch(0.75 0.19 194) 130.18%);
}

<div class="bg-custom size-32 border-2"><!-- ... --></div>

• https://play.tailwindcss.com/gQnnRH3ppx?file=css

[mzulfanw]

thanks mate @rozsazoltan

[rozsazoltan]

If you want to apply linear-gradient as a text color, you need to mask the background color onto the text, something like this:

• background: need support custom bg-graident-[xxx] #18602 (comment)
• https://play.tailwindcss.com/qPcv6ItGgq

In your case:

@theme {
  --background-image-custom: linear-gradient(101.98deg,oklch(0.53 0.25 259) 41.25%,oklch(0.75 0.19 194) 130.18%);
}

<div class="bg-clip-text text-transparent bg-custom text-5xl font-bold">Hello World</div>

• https://play.tailwindcss.com/AwYmKQkywn

Note: by bg-clip-text text-transparent

[mzulfanw]

alright i see, thanks againn