CSS Blur Effect

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
These upscaled images sure do look awful on an iPad with retina display, :stuck_out_tongue_closed_eyes: yuck!

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
Smoothed things out nicely with filter: blur().

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. 

Enjoyed this Content?

Help keep it free by sending a donation or purchasing something from my Amazon Wish List. You can also subscribe to various site feeds to get notified of new posts, follow me on social media, and more.

Leave a Comment