0

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.

trydmi
  • 1
  • 2

1 Answers1

-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>
Johan
  • 2,088
  • 2
  • 9
  • 37
  • 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 – trydmi Feb 02 '23 at 09:56