CODEWITHSUNDEEP
css
Dudu Benafshi
Dudu Benafshi

Reputation: 11

Create a frosted glass (Blurred) background with a circle spotlight to highlight an html section on the screen

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?

Upvotes: 1

Views: 353

Answers (1)

dave
dave

Reputation: 2901

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>

Upvotes: 1

Related Questions