Mask Image, create rectangle from multiple gradients

Question

I have a radial gradient that used as a mask-image "fades" an image in to the background-color behind the image.

mask-image: radial-gradient(ellipse at center, rgba(255,255,255,1) 1%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);

How do I get the same effect with an evenly rectangular gradient on all four sides?

I know you can combine gradients and my most current attempt does not seem to have any effect:

img
{
 mask-image: 
  linear-gradient(to top, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
  linear-gradient(to right, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
  linear-gradient(to bottom, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
  linear-gradient(to left, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%);
}

Temani Afif · Accepted Answer · 2021-08-27T18:34:19.677

7

The trick with multiple mask is to control the size/position so that each one will apply to a region of your element:

.box {
  height:300px;
  width:300px;
  background: url(https://picsum.photos/id/1003/300/300);
  -webkit-mask: 
     linear-gradient(to top,    transparent,#fff) top   /100% 20%,
     linear-gradient(to bottom, transparent,#fff) bottom/100% 20%,
     linear-gradient(to left  , transparent,#fff) left  /20% 100%,
     linear-gradient(to right , transparent,#fff) right /20% 100%;
  -webkit-mask-repeat:no-repeat;
  
  mask: 
     linear-gradient(to top,    transparent,#fff) top   /100% 20%,
     linear-gradient(to bottom, transparent,#fff) bottom/100% 20%,
     linear-gradient(to left  , transparent,#fff) left  /20% 100%,
     linear-gradient(to right , transparent,#fff) right /20% 100%;
  mask-repeat:no-repeat;
}

body {
  background:pink;
}

<div class="box"></div>

Or like this:

.box {
  height:300px;
  width:300px;
  background: url(https://picsum.photos/id/1003/300/300);
  -webkit-mask: 
    linear-gradient(to top,  transparent 10%, #fff 15% 90%, transparent 95%),
    linear-gradient(to left, transparent 10%, #fff 15% 90%, transparent 95%);
  -webkit-mask-size:110% 110%;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite: source-in;
  
  
  mask: 
    linear-gradient(to top,  transparent 10%, #fff 15% 90%, transparent 95%),
    linear-gradient(to left, transparent 10%, #fff 15% 90%, transparent 95%);
  mask-size: 110% 110%;
  mask-position: center;
  mask-repeat:no-repeat;
  mask-composite: intersect;
}

body {
  background:pink;
}

<div class="box"></div>

Related: How to make a rectangular transparency gradient CSS3?

edited Aug 27 '21 at 18:34

answered Mar 07 '20 at 10:01

Temani Afif

245,468
26
309
415

The first one is an inverse of what I'm trying to accomplish so I'll try switching the positioning. I'm not sure what is going on with the second set. I test in Waterfox first/by default. – John Mar 07 '20 at 10:10
@John I created both variant, the second one is the opposite of the first one. they should work fine in Chrome and Firefox – Temani Afif Mar 07 '20 at 10:11
Fantastic! The second one is what I'm interested in. Because I'm absolutely certain that I'll be using `mask` a *lot* in the future I've started to record what works. I even somehow generated a cross and your first one would work to censor or perhaps some game where guessing is a key component. Great stuff, thank you! – John Mar 07 '20 at 10:20
1

@John I already provided some answers using mask trick if you are intrested ;) https://stackoverflow.com/search?tab=newest&q=user%3a8620333%20mask – Temani Afif Mar 07 '20 at 10:23
Lol awesome! I'll edit your answer here to reflect what I was trying to do (since I didn't provide a screenshot or anything). Thank you again! :-) – John Mar 07 '20 at 10:36
@John note that for the mask-composite you need intersect when using `mask-composite` and source-in when using `-webkit-mask-composite` – Temani Afif Mar 07 '20 at 10:40
There *had* to be something messy. ︎ I have it working save a small bug in my platform's preprocessor. I was actually dealing with that and was about to comment. ︀ – John Mar 07 '20 at 10:46

Mask Image, create rectangle from multiple gradients

1 Answers1

Linked

Related