CSS blur effect

Categories
updated on
Related topics

Playing with the new Depth Effect (aka fauxkeh) on my iPhone 7 Plus got me thinking about Gaussian blurs, and how to improve their use on this site.

In this last redesign, I applied a blurred effect to images in a few key locations1. To keep page speed in check I shrunk images down to ~20px wide, optimized them with imagemin, and then scaled them up with background-size: cover to fill their parent containers.

The browser does the rest, enlarging and smoothing out these tiny images — creating a blurred effect of sorts. For the most part they look good. On devices that display @2x or higher, blotchy patterns and artifacts begin to show their ugly faces.

ugly upscaled images on a high resolution display

This is where CSS filter functions like blur come into play. By adding a single line to my stylesheet I was able to smoothen out these images just enough to overcome the ugly.

.teaser__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
+ filter: blur(15px);
  background-repeat: no-repeat;
  background-size: cover;
}

blur filtered background images

The best part, browser support for CSS filter effects is quite good.


  1. Cover images with a striped pattern overlay. Background images in the post pagination links found at the bottom of each page.

About the author

Hi I’m Michael Rose. Just another boring, bearded, tattooed, time traveling designer from Buffalo New York. I maintain several open source projects and occassionally blog.

Glitched photo of Michael Rose with a long beard.