Knockout text with blurred background in HTML and CSS

user_8286014 0
Viewed 75

I'm a intermediate beginner in HTML/CSS and I want to do an effect that's very easy to do in design software like Figma or XD, which is a blurred background behind text. I've read about background-clip, backdrop-filter and plain filter CSS properties but I don't know if it is even possible to put those together to make a text that blurs anything behind it.

I've made a simple mockup in Figma to show the effect I'm after and what other questions around the internet are asking for which aren't what I'm trying to do: Mockup

Is this possible in HTML and CSS? If so, how would I do it? I'm willing to accept anything that works in just recent Chrome versions and/or needs JavaScript.

filter css html
1 Answers

Here is an idea using mask but it does work only on Chrome

.box {
  padding: 20px 0;
  background: url(https://picsum.photos/id/1016/800/600) center/cover;
  text-align: center;
}

h1 {
  font-weight: 900;
  font-family: sans-serif;
  font-size: 100px;
  color: #0002;
  -webkit-mask: linear-gradient(#000 0 0) text;
          mask: linear-gradient(#000 0 0) text;
  backdrop-filter: blur(10px);
}
<div class="box">
  <h1>Some Text</h1>
</div>

user_86203330
Related