Applying background opacity to a gradient background

[gfungx]

It seems that I am unable to apply any bg-opacity-{value} classes to an element that has any form of background gradient. Currently I am trying to do this here:

<div className="w-full bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 bg-opacity-25 rounded p-6 mt-4">
        // children...
</div>

If you were to run this code, you would just see a block with a full opacity gradient in the background, without the bg-opacity-25 applying. Are there any work arounds or solutions for this?

[hugovntr]

Hello,

I often find myself in the same scenario so I found a workaround to get the effect you want. Basically, since the .bg-opacity has no effects on gradients (as well as CSS variables) we can use the regular .opacity combined with some .absolute to get the effect to work.

<div class="relative w-full">
    <div class="absolute inset-0 bg-gradient from-color to-color opacity-25"></div>
    <div class="relative">
        <!-- children -->
    </div>
</div>

[rushkii]

it depends on the case, if there is a text in the children and the text will apply the opacity too.

[marcia-lima]

The following discussions might be related to yours:

• #2429
• #3617
• #3425

[cosminepureanu]

Using Tailwind v3.0
Nowadays you can add /25 to the color to make it 25% opaque.
In your case, this should work:

<div className="w-full bg-gradient-to-r from-purple-400/25 via-pink-500/25 to-red-500/25 rounded p-6 mt-4">
        // children...
</div>

[ghost]

Thanks

[is-it-ayush]

This works if you have a color hard-coded directly into the config although would fail if you're using css variable colors such as,

colors: {
  red: "var(--color-red)",
}

Here's a quick repro.

[depsimon]

You need to use a rgb/hsl notation for your colors. Here's your repro fixed. https://play.tailwindcss.com/3J4X83cxrk?file=css

[is-it-ayush]

Yep! I did figure this out later but forgot to update it here. Thank you @depsimon!!

[kavinda1995]

YOU SAVED ME sensei!