radial-gradient support

[surjithctly]

Can tailwindcss support radial-gradient?

I'd love to see it.

[adamwathan]

Hey @surjithctly! You can add radial gradients yourself if you like by adding them to the backgroundImage section of your tailwind.config.js file:

https://tailwindcss.com/docs/background-image#customizing

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--gradient-color-stops))',
      }
    }
  }
}

Here's a demo:

https://play.tailwindcss.com/fBVvvF0Phn

[owenduncansnobel]

Ya this doesn't appear to work for v3..

[maxzz]

It works with version 3 like a charm, but you need to use the correct variable name. TailwindCSS 2+ uses the name "var(--tw-gradient-stops)" instead of "var(--gradient-color-stops)".

[vltansky]

Tailwind 3 works:
https://play.tailwindcss.com/kQvzcR8OF8

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
      }
    }
  }
}

[tarunpotnuru18]

@vltansky
module.exports = {
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
}
}
}
}
hey could you please tell me how to convert this to v4

[wongjn]

In v4 you don't, it's built in. See https://tailwindcss.com/docs/background-image#adding-a-radial-gradient

[Everett656]

Yes, plugin requires Tailwind CSS 1.2 or later. If your project uses an older version of Tailwind, you should install the latest 2.x version of this plugin.

[polyzen]

Seems like a phishing link was edited into this comment?

[RobinMalfait]

@polyzen thanks for noticing it. I removed the link from the comment.

[d4h0]

In case someone missed it: In Tailwind 2.x the CSS variable name seems to have changed.

So now you'd add radial gradients via:

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
      }
    }
  }
}

[sebmellen]

Thank you, took me a bit to figure this out on my own 😆.

[LuisValgoi]

thanks for this. worked for me.

[KehindeAyan]

Perfecto! Works great here. Thank you.

[diegocaminor]

it worked for tailwind version 3 too! 😄

[dkkazmierczak]

Works great! Thanks :)

[marinac-dev]

Is there a way to set gradient as background color? If I want to use it in combination with mix blend, it doesn't work
For example:
bg-gradient-radial is extended backgroundImage as shown above.

<div class="bg-gradient-radial from-yellow-400 to-gray-9000">
    <div class="mix-blend-multiply bg-some-svg"></div>
</div>

PS: I also tried bg-blend-multiply but to no avail

[techniq]

It would also be nice to support conic gradients as well. See #6087 for implementation and example.

[vltansky]

Tailwind 3 compatible:

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
      }
    }
  }
}

https://play.tailwindcss.com/kQvzcR8OF8

[cesswhite]

work for me, thanks

[madsenmm]

Anyone else having issues with webpack builds failing, when using this exact extend?

backgroundImage: {
  'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
}

[eslachance]

So now how do you create arbitrary at values? How would you do at 75% 25% to position it 3/4 of the way top-right? This is way beyond the capabilities of any beginner to implement on their own. A helper would be really helpful.

I tried with just adding a custom color in the config and you can't because bg-somecolor doesn't translate to background- it translates to background-color , which doesn't support radial-gradient.

[7iomka]

So now how do you create arbitrary at values? How would you do at 75% 25% to position it 3/4 of the way top-right? This is way beyond the capabilities of any beginner to implement on their own. A helper would be really helpful.

I tried with just adding a custom color in the config and you can't because bg-somecolor doesn't translate to background- it translates to background-color , which doesn't support radial-gradient.

The same question.
At the moment I use arbitrary className for this case: [background-image:radial-gradient(50%_50%_at_50%_50%,_#0C2D23_0%,_rgba(12,45,35,0)_100%)]

[jim-king-2000]

What is the easiest way to express this in Tailwind CSS? We have to use style so far.

<div
  className={`absolute w-[calc(50%-1px)] aspect-square rounded-tl-full origin-bottom-right rotate-45 transform-gpu bg-default opacity-50 flex items-center justify-center`}
  style={{
    WebkitMaskImage: 'radial-gradient(circle farthest-side at bottom right, transparent 40%, #000 40%)',
    mask: 'radial-gradient(circle farthest-side at bottom right, transparent 40%, #000 40%)',
  }}
>
  <ChevronUpIcon className='h-6 w-6 -rotate-45 transform-gpu' />
</div>

[alexdsgmoura]

Hey folks, give this a try!

backgroundImage: {'gradient-radial': 'radial-gradient(circle, var(--tw-gradient-from), var(--tw-gradient-to))'}

[jim-king-2000]

It not only a gradient, but also a mask. How to express mask in Tailwind CSS?

[alexdsgmoura]

Create the custom styles you want in the Tailwind CSS configuration file tailwind.config.js

[jim-king-2000]

I'm quite new to Tailwind CSS. Any example for creating a radial gradient mask in tailwind.config.js?

[jim-king-2000]

By the way, we are writing a translucent pan control.

[jim-king-2000]

And how to express multiple gradients in Tailwind CSS?

<div
  className='flex flex-1 flex-col bg-[length:20px_20px] bg-repeat'
  style={{
    backgroundImage:
      'linear-gradient(to bottom, transparent 19px, rgba(255, 255, 255, 0.1) 20px), linear-gradient(to right, transparent 19px, rgba(255, 
  255, 255, 0.1) 20px)',
  }}
/>