Adding blur effects is a surefire way to make a surrounding design element stand out. For example, adding a bit of haziness to a background photo will draw attention to the layered text on top.
Crafting this look used to require photo editing software. But that’s no longer the case. You can add stunning blur effects using CSS and JavaScript. And it’s easier than you may think.
There is also a wide array of possibilities. You could opt for that simple blur on a photo. But you can also combine the effect with animation and user actions. This allows you to add some creativity to the mix.
With that in mind, let’s explore eight excellent examples of CSS and JavaScript blur effects in action.
Animated Blurred Gradients by Wil van der Tuin
Blur effects can turn a bold design into something subtle. This animated background is a prime example. It could be overwhelming without the effect. Add some blurriness, and it becomes a bit player in the scene.
See the Pen Blurred animated gradients by Wil van der Tuin
CSS Text Transform with Blur by Ambika Castle
Here’s a unique way to create a spooky atmosphere. The text is initially presented at an extreme angle and is partially blurred. As you scroll, both the angle and degree of blur are increased. The CSS transform property is used to great effect.
See the Pen text-transform-and-blur by Ambika Castle
Glitched & Blurred CSS Worms by Fabio Ottaviani
This animation is reminiscent of looking at bacteria through a microscope. Tiny “worms” jitter their way along the screen. The combination of blur and glitch effects makes it all the more realistic. You might want to wash your hands after watching this one.
See the Pen Worms by Fabio Ottaviani
Pure CSS Blurred Video Background Login Box by Lokesh Suthar
In this example, a blur effect is used to create a retro look. A CSS filter is applied to the video background. It adds to the aesthetic while also allowing the login box to take center stage.
See the Pen Pure CSS Blurred Video Background Login Box. by Lokesh Suthar
Interactive Dynamic Depth of Field Blur Effects by Thomas Trinca
This depth-of-field presentation demonstrates the power of blur effects. Hover over a playing card and see it come into focus while the others are blurred into obscurity. The 3D look is something to behold.
See the Pen Interactive dynamic depth of field by Thomas Trinca
Blurred VHS Text Effect by Maria
If you came of age during the 1980s, you’re probably familiar with VHS tapes. Blurriness came naturally to these relics of the past. Here, the effect is recreated with CSS and JavaScript.
Note: This animation contains strobe effects – please use discretion when viewing!
See the Pen VHS text by Maria
Animated Blurred Loading Dots by Prathamesh Koshti
This relatively simple loading animation has a secret weapon. As each sphere bounces towards us, it becomes blurry. It’s almost as if the objects were getting a little too close for comfort. The effect adds an element of surprise.
See the Pen Loading Animation by Prathamesh Koshti
Slick Slideshow with Blur Effect by Fabio Ottaviani
Here’s a way to dress up a slider without resorting to massive images. This snippet creates a duplicate of the current image and places it in the background. From there, a heavy blur effect is added to compliment the aesthetic.
See the Pen Slick Slideshow with blur effect by Fabio Ottaviani
Bringing a Fresh Perspective to Design
Blur effects are a great addition to any designer’s toolbox. For one, they’re extremely versatile. You can use them as a background piece. But they’re also able to play a more prominent role.
Even better is that you don’t need to be an expert photo editor. Code can satisfy most use cases. For example, CSS has the blur() function built right in. And effects can even be applied to background elements.
Further, JavaScript can help take these effects to the next level. Animation libraries like GSAP offer a ton of flexibility.
Want to see even more examples of blur effects in action? Head on over to our CodePen collection!
