How to Store and Access Gradient Values in @theme (Tailwind CSS v4)?

[Arifulislam5577]

Hi team 👋

I'm trying to store custom CSS gradient values in the new @theme section of Tailwind CSS v4 but I'm not sure if this is the correct approach or how to access them in utilities.

Here's what I'm currently doing:

@theme {
  --color-gradient-1: linear-gradient(135deg, #a585ff 0%, #ffc2ad 100%);
  --color-gradient-2: linear-gradient(135deg, #f9eb57 0%, #f99988 100%);
  --color-gradient-3: linear-gradient(135deg, #83e7ee 0%, #f9eb57 100%);
  --color-gradient-4: linear-gradient(135deg, #864ffe 0%, #23eed6 100%);
}

I want to use these variables like:

<div class="bg-[--color-gradient-1]">Gradient Background</div>

But it doesn’t seem to work as expected.

🔍 Questions:

1. Is this the correct way to define gradient values inside the @theme block?
2. Can --color-gradient-* variables be used in bg-[...] utilities?
3. If not, what is the recommended approach to store reusable gradient backgrounds in Tailwind v4?

Any help or guidance would be much appreciated 🙏

Thanks!

[wongjn]

If you define them with --background-image prefix, you don't need to use arbitrary value syntax:

@theme {
  --background-image-gradient-1: linear-gradient(135deg, #a585ff 0%, #ffc2ad 100%);
  --background-image-gradient-2: linear-gradient(135deg, #f9eb57 0%, #f99988 100%);
  --background-image-gradient-3: linear-gradient(135deg, #83e7ee 0%, #f9eb57 100%);
  --background-image-gradient-4: linear-gradient(135deg, #864ffe 0%, #23eed6 100%);
}

<div class="bg-gradient-1">Gradient Background</div>

If you want to keep using the --color-gradient-* naming scheme, you'd need to type-hint the value with image::

<div class="bg-(image:--color-gradient-1)">Gradient Background</div>

[Arifulislam5577]

@wongjn thank you soo much.