1

I am trying to create a frosted glass (blurred) background with a circle shape section of it unblurred with no success this is what I got so far in sandbox editor, but there is a problem with this implementation the area of the circle is staying blurred

https://codesandbox.io/s/frosted-glass-background-with-spotlight-fwdhd note: the sandbox has been created with vue 2 but it is a simple problem to reproduce in vanilla

I think that it can be done with a canvas html tag but I am not sure of the way to implement it.

can someone please help?

Ahmad Adibzad
  • 501
  • 2
  • 6
  • 14
Dudu Benafshi
  • 11
  • 1
  • Have a look at this. This may be what you are looking for with some tweaks. https://stackoverflow.com/questions/67026047/create-focus-circle-with-blurry-background-in-html-and-css – Dula Sep 18 '21 at 12:03
  • already done this in the sandbox and it has a lot of problems from browser compatibility to the problem i complained about – Dudu Benafshi Sep 18 '21 at 12:11

1 Answers1

1

You can do this in CSS by using mask-image and CSS filter.

The example below uses a transparent PNG with a circle as the mask, and the filter property to blur the image below.

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 400px;
  height: 300px;
  margin: 1em auto;
  position: relative;
}

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-size: cover;
  mask-size: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.container img.overlay {
  filter: blur(10px);
}

.container img.underlay {
  -webkit-mask-image: url(https://i.imgur.com/l4o4AkX.png);
  mask-image: url(https://i.imgur.com/l4o4AkX.png);
  z-index: 2;
}
<div class="container">
  <img class="underlay" src="https://cdn.glitch.com/04eadd2b-7dd4-43fc-af3d-cff948811986%2Fballoons.jpg?v=1597755892826" alt="Balloons">
  <img class="overlay" src="https://cdn.glitch.com/04eadd2b-7dd4-43fc-af3d-cff948811986%2Fballoons.jpg?v=1597755892826" alt="Balloons">
</div>
dave
  • 2,750
  • 1
  • 14
  • 22