Set opacity for background with linear gradient [duplicate]

Question

my problem is the following: I have a div, that is just a background and has other tags inside. I apply the following background to the div:

background: linear-gradient(158.72deg, rgba(255, 255, 255, 0.4) 3.01%, rgba(255, 255, 255, 0) 103.3%);

I also need to apply to this div an opacity of 0.5. If I just add another line like this to the css file:

opacity: 0.5;

It will apply this opacity to all the elements inside but I don't wan't it.

Other questions suggest to apply rgba(0, 0, 0, 0.5) but I can't do that since I have a linear gradient in which there is already an opacity of some kind. What do I do?

P.S. this background and opacity are taken from figma template

I also had no luck with some online gradient generators.

Johan · Accepted Answer · 2023-02-02 09:53:18Z

-1

You can wrap a div in another one and apply opacity like so :

<div class="outer-div" style="background: linear-gradient(158.72deg, rgba(255, 255, 255, 0.4) 3.01%, rgba(255, 255, 255, 0) 103.3%);">
  <div class="inner-div" style="opacity: 0.5;">
    <!-- content goes here -->
  </div>
</div>

answered Feb 2, 2023 at 9:53

Johan

3,1066 gold badges23 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

trydmi Over a year ago

The problem is that inside outer and inner divs I have elements like text and they also get under this opacity and I don't wan't that to happen I need only background to be with opacity no the text and other elements inside

Collectives™ on Stack Overflow

Set opacity for background with linear gradient [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related