Frosting Glass with CSS Filters

CSS-Tricks

Frosting Glass with CSS Filters

The following is a guest post by Bear Travis, a Web Standards Engineer at Adobe. I'm a fan of how Adobe is pushing the web forward with new design capabilities, and doing it in a responsible way. CSS filters is a good example. They knew they were desired because Photoshop paved the way. They brought them to the web with a sensible syntax and they helped with both the spec and browser implementation. Now we're seeing them in stable browsers, and they are advocating use through responsible progressive enhancement. Hallelujah. Here's Bear with a tutorial about just that.

While filters such as contrast, saturate, and blur have existed in image editors for some time, delivering them on the web has historically required serving images with those filters already applied. As browsers begin to incorporate filters as part of the web platform, we can begin breaking down complex visual effects into their component parts, and implementing them on the web. This article will examine one such effect, frosted glass, and how CSS filters provide a cleaner, more flexible solution than static images.

Old School: Frosted Glass with Images

The frosted glass effect has been kicking around the internet for a while; we even saw it here on CSS-Tricks back in 2008. The idea behind the effect is relatively simple: just blur and lighten the area behind overlaid content. The content gains higher contrast with its background, but you still maintain a rough idea of what's going on behind it. The CSS-Tricks article uses two images: a standard version and a frosted version (blurred with a white tint). In our example, a card slides up to reveal content, while frosting over the background.

Demo

See the Pen Frosted Glass Effect Using Multiple Images by Adobe Web Platform (@adobe) on CodePen.

The HTML

The markup is relatively simple. We only have a single article that contains content.

<article class="glass down">
  <h1>Pelican</h1>
  <p>additional content...</p>
</article>

The CSS

We first size everything to the viewport. Then, we overlay a blurred version of the background on top of the original background. Finally, we add a white tint. The overflow is hidden to prevent scrolling and to clip the effect to the .glass element.

html, body, .glass {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    background-image: url('pelican.jpg');
    background-size: cover;
}
.glass::before {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('pelican-blurry.jpg');
    background-size: cover;
    content: ' ';
    opacity: 0.4;
}
.glass {
    background-color: white;
}

The above CSS will create our blurred and lightened overlay. We also need to shift the overlay down to the bottom of the page, leaving just enough space to view the header text. Since the blurred image is a child of the overlay, we also need to shift it back up by the opposite amount in order to keep it aligned with the body background. Because the demo uses transitions, I chose to use CSS transforms rather than the background-attachment property, as CSS transforms can be hardware accelerated.

.glass.down {
    transform: translateY(100%) translateY(-7rem);
}
.glass.down::before {
    transform: translateY(-100%) translateY(7rem);
}
.glass.up, .glass.up::before {
    transform: translateY(0);
}

Notes

If you'd like a further breakdown, I built a deconstructed version of the effect.

The above technique is straightforward, and has solid browser support. Although I spruced up the demo a bit with transitions, the other required features – generated content, opacity, transforms and background-size – all have solid browser support ranging back to IE 9 (with the exception of Opera Mini).

New School: Frosted Glass with Filters

The duplicate image technique requires maintaining a blurred image along with the original, which can become a pain if you need to reuse the effect for multiple images. For example, responsive designs may require swapping in different images at different screen sizes. Or, template layouts may drop in images dynamically (eg, a different header image for every blog post). For these cases, it would be nice to generate the effect using only the source image. After all, we're just blurring it.

This is where CSS Filters come in handy. They allow us to apply the blur in the browser, using the CSS filter property.

The CSS

We can adjust the CSS for the frosted glass overlay to be the original image with a blur filter applied.

.glass::before {
    background-image: url('pelican-blurry.jpg');
}

.glass::before {
    background-image: url('pelican.jpg');
    filter: blur(5px);
}

Demo

See the Pen Frosted Glass Effect Using Filter Effects by Adobe Web Platform (@adobe) on CodePen.

Caveats

Easy peasy, right? Unfortunately, CSS Filters are somewhat new. That means they may be vendor prefixed, and that their browser support is not yet universal. However, filters have a longer history in SVG, and applying SVG filters to HTML content via CSS has wider browser support. You can easily add them as a fallback for when CSS filters are not supported. The above demo actually does just that.

To add an SVG filter, we include some inline SVG in our HTML markup, and reference the filter with a url(). Pro tip: An alternative is to encode the SVG filter and reference as a data url, but that format is a bit more difficult to read in an article.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>
</svg>

.glass::before {
    background-image: url('pelican.jpg');
    /* Fallback to SVG filters */
    filter: url('#blur');
    filter: blur(5px);
}

There will still be cases where neither CSS nor SVG Filters are supported by a browser. In that case, the user will see text on a lightened (tinted but unblurred) background, which isn't too shabby.

Conclusion

Filters allow us to use effects in the browser that were previously only available in image editors. As an element's style, rather than a rendered image, they are easier to alter and reuse. You can use CSS Filters in current versions of Chrome, Safari, and Opera, and they are under active development in Firefox (no word yet on Internet Explorer). With a little care towards fallback behavior, you can start using them today.

---

Frosting Glass with CSS Filters is a post from CSS-Tricks

more info...