1

I need to apply a radial gradient of opacity to a repeating background image.

The proposed solutions online recommend to add another solid color gradient over the image giving the illusion of a fading background image. However, this solid color gradient solution will not work in my case because the background is not a solid color, but rather a linear gradient.

Here is an exaggerated example of what I'm trying to achieve using a bright red repeating background image and a grey to black gradient background.

enter image description here

How can I actually fade a background image?

mrg95
  • 2,371
  • 11
  • 46
  • 89

1 Answers1

2

Use mask

.box {
  width:300px;
  height:200px;
  background:url(https://picsum.photos/id/10/600/800) center/cover;
  -webkit-mask:radial-gradient(circle at 20% 40%, transparent , #fff 50%);
          mask:radial-gradient(circle at 20% 40%, transparent , #fff 50%);
}

body {
 background:pink;
}
<div class="box">

</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Wow that was quick! Works perfectly, I've never heard of mask in css before. Thanks so much! – mrg95 Sep 23 '19 at 23:26
  • This appears to also mask anything inside the div as well. It's not just a mask on the background image. Is there any way to still have other elements show up while inside this div? – mrg95 Sep 24 '19 at 00:06
  • 1
    @mrg95 use a pseudo element as a background layer and apply mask to it. Consider it like opacity, if you apply it you will affect all the content – Temani Afif Sep 24 '19 at 00:07
  • 1
    @mrg95 check this for the pseudo element trick: https://stackoverflow.com/a/7241440/8620333 – Temani Afif Sep 24 '19 at 00:09
  • Got it working perfectly! You're a wizard. Thanks again :) – mrg95 Sep 24 '19 at 00:16
  • I'd like to note that this does not function for IE – mrg95 Nov 05 '19 at 04:25