Apply background-filter with background-clip

Question

I want to apply a blurred background effect to a text. So I have this:

CSS

background: rgba(255,255,255,0.8);
-webkit-background-clip: text;
color: transparent;
backdrop-filter: blur(15px);

HTML

<h3>this is a text</h3>`

However when backdrop-filter is applied that blur applied to the entire H3 container not just the clipped text. Why is that?

That will blur the entire text, I want to blur the background inside of it. I think it's called "glassy text". — Sandro Antonucci, Oct 07 '20 at 10:00
I think somehow similar to this `https://stackoverflow.com/questions/20039765/how-to-apply-a-css-filter-to-a-background-image` — Awais, Oct 07 '20 at 10:10

ISD · Answer 1 · 2020-10-07T10:11:40.720

The backdrop is NOT the background. As example:

body {
  padding: 50px;
  background: url(https://images.unsplash.com/photo-1553532434-5ab5b6b84993?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80) no-repeat 50% 50% /cover;
}

.test {
  width: 52px;
  height: 52px;
  background: url(https://img.icons8.com/material/24/ffffff/home--v5.png) no-repeat 50% 50%;
  border: 2px solid #fff;
  margin: 0 auto;
  
  backdrop-filter: blur(15px);
}

<div class="test"></div>

Here you can see what backdrop-filter is applied only to backdrop of .test (underlying elements). It is not applying to background (you can see what house icon created with background stayed unblurred)

So, when you are attempting to use background-clip it clips only background (which is transparent). Backdrop is left as-is.

If you want glassy text you could look at this question.

Home icon by Icons8

Worth noting that `backdrop-filter` is [not enabled by default yet in Firefox](https://caniuse.com/css-backdrop-filter) — DBS, Oct 07 '20 at 10:17

Apply background-filter with background-clip

1 Answers1