CSS blur effect

1 min read

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 or follow me on social media.

Leave a comment

Explore more:

web developmentCSS

↑ back to top