How can I create a square gradient in CSS to use a mask

Question

Using the backdrop-filter css parameter, you can blur the background of a div:

#image {
  width:300px;
  height:300px;
  background: url(https://i.picsum.photos/id/527/300/300.jpg?hmac=wk333ApmV6eJV8v2QbKrGH1urFbDlb2bEt92dWS5Yno);
}

#image div {
  position: absolute;
  top: 75px;
  left: 75px;
  width: 150px;
  height: 150px;
  backdrop-filter: blur(12px);
}

<div id="image">
  <div>Blurred</div>
</div>

Using the mask-image parameter, you can add a gradient mask to fade out an edge:

#image {
  width:300px;
  height:300px;
  background: url(https://i.picsum.photos/id/527/300/300.jpg?hmac=wk333ApmV6eJV8v2QbKrGH1urFbDlb2bEt92dWS5Yno);
}

#image div {
  position: absolute;
  top: 75px;
  left: 75px;
  width: 150px;
  height: 150px;
  backdrop-filter: blur(12px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
}

<div id="image">
  <div>Blurred</div>
</div>

Is there a way to create a blurred square with these faded edges, that can handle being resized? Or a way to receive the same effect with another method?

Answer 1

You could use a black png to do so like this one https://upload.wikimedia.org/wikipedia/commons/7/76/WX_circle_black.png

#image {
  width:300px;
  height:300px;
  background: url(https://i.picsum.photos/id/527/300/300.jpg?hmac=wk333ApmV6eJV8v2QbKrGH1urFbDlb2bEt92dWS5Yno);
}

#image div {
  position: absolute;
  top: 75px;
  left: 75px;
  width: 150px;
  display:flex;
  justify-content:center;
align-items:center;
  height: 150px;
  backdrop-filter: blur(12px);
  mask-image: url('https://upload.wikimedia.org/wikipedia/commons/7/76/WX_circle_black.png');
  -webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/7/76/WX_circle_black.png');
-webkit-mask-size: cover;

}

<div id="image">
  <div>Blurred</div>
</div>

Answer 2

Use the box-shadow inside of an element (inset).

Syntax:
<inset> <x-offset> <y-offset> <blur-radius> <spread-radius> <color>

In this example I just used blue for demonstration purpose.

#image {
  width:300px;
  height:300px;
  background: url(https://i.picsum.photos/id/527/300/300.jpg?hmac=wk333ApmV6eJV8v2QbKrGH1urFbDlb2bEt92dWS5Yno);
  box-shadow: inset 0 0 50px 10px rgba(0, 0, 255, 0.8);
}

<div id="image">
</div>