Adding blur effects to design elements can make them stand out and draw attention. In the past, this required photo editing software, but now it can be done using CSS and JavaScript. There are many possibilities for using blur effects, including combining them with animation and user actions for added creativity. This article explores eight examples of CSS and JavaScript blur effects in action.
1. Animated Blurred Gradients by Wil van der Tuin:
This example showcases an animated background with a blur effect that turns a bold design into something subtle. The blurriness adds depth to the scene.
[View Example](https://codepen.io/Jeromche/pen/KKQrGgP)
2. CSS Text Transform with Blur by Ambika Castle:
This unique example creates a spooky atmosphere by presenting text at an extreme angle and gradually increasing the blur as you scroll. The CSS transform property is used effectively.
[View Example](https://codepen.io/ambika/pen/RrEVNj)
3. Glitched & Blurred CSS Worms by Fabio Ottaviani:
This animation resembles bacteria viewed through a microscope. The combination of blur and glitch effects creates a realistic look.
[View Example](https://codepen.io/supah/pen/KKGqjmL)
4. Pure CSS Blurred Video Background Login Box by Lokesh Suthar:
In this example, a blur effect is applied to the video background to create a retro look. The login box takes center stage while the background adds to the aesthetic.
[View Example](https://codepen.io/magnus16/pen/emNbav)
5. Interactive Dynamic Depth of Field Blur Effects by Thomas Trinca:
This presentation demonstrates the power of blur effects by allowing users to hover over playing cards and see them come into focus while others are blurred. The 3D effect is impressive.
[View Example](https://codepen.io/Trinca/pen/dWejMB)
6. Blurred VHS Text Effect by Maria:
This example recreates the blurriness of VHS tapes from the 1980s using CSS and JavaScript. It adds a nostalgic touch to the design.
[View Example](https://codepen.io/shorinamaria/pen/egJmeY)
7. Animated Blurred Loading Dots by Prathamesh Koshti:
This loading animation features blurry spheres that bounce towards the viewer, adding an element of surprise. The blur effect enhances the animation.
[View Example](https://codepen.io/prathameshkoshti/pen/bGNbMWr)
8. Slick Slideshow with Blur Effect by Fabio Ottaviani:
This snippet creates a slider with a duplicate of the current image placed in the background and a heavy blur effect applied. It adds a stylish touch to the slideshow.
[View Example](https://codepen.io/supah/pen/yePzKO)
Blur effects are versatile and can be used as background elements or in more prominent roles. CSS provides the blur() function for easy implementation, and JavaScript can enhance these effects with animation libraries like GSAP. For more examples of blur effects, visit the CodePen collection linked in the article.
