Mask Image, create rectangle from multiple gradients
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%);
}
Solution 1:
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?