21+ CSS Blur Effects

Last Updated on by in CSS Examples
CSS Blur Effect

Do you want to create a blurry (hazy or fuzzy) effect on your web pages? We are excited to showcase a collection of CSS blur effects. These free HTML and CSS code examples offer a diverse range of visual techniques that make an image or interface appear out of focus, sourced from reliable platforms such as GitHub and Codepen.

A blur effect is a visual technique that softens the details and sharpness of the selected area or image, drawing attention to specific focal points by deliberately blurring surrounding or less important elements.

To enhance the aesthetic appeal of user interface (UI) design, these blur effects examples can be applied to backgrounds, overlays, or certain UI elements to improve readability, emphasize key content, or create a sense of depth and hierarchy within the interface.

Our collection makes it easy to give your web designs depth, focus, and an elegant look. Whether you want a simple or eye-catching look, these blur techniques will definitely make your website look better, giving it both a sophisticated and vibrant look.

Embark on a journey through our collection and unleash the potential to elevate your designs using the dynamic prowess of CSS.

01. Dynamic Inside Blur Pure CSS

See the Pen
DYNAMIC INSIDE BLUR PURE CSS
by Kseso (@Kseso)
on CodePen.

Author: @Kseso
Links: Source Code / Demo
Created on: November 08, 2013
Made with: HTML, CSS, JS

02. Hover Effect Blur

See the Pen
Hover effect blur
by Hervé (@herve)
on CodePen.

Author: Hervé, @herve
Links: Source Code / Demo
Created on: October 24, 2014
Made with: HTML, CSS

03. Progressive Blur with CSS and SVG

See the Pen
Progressive blur with CSS & SVG
by Vincent De Oliveira (@iamvdo)
on CodePen.

Author: Vincent De Oliveira, @iamvdo
Links: Source Code / Demo
Created on: June 20, 2013
Made with: HTML, CSS

04. In/out of Focus Text Effect

<

See the Pen
In/out of focus text effect
by Jonny Scholes (@jonnyscholes)
on CodePen.

Author: Jonny Scholes, @jonnyscholes
Links: Source Code / Demo
Created on: May 23, 2015
Made with: HTML, CSS

05. Shifting Depth of Field

See the Pen
Shifting Depth of Field
by Thomas Trinca (@Trinca)
on CodePen.

Author: Thomas Trinca, @Trinca
Links: Source Code / Demo
Created on: July 13, 2016
Made with: HTML, CSS

06. Blur Buttons

See the Pen
Blur Buttons
by Natalie Frecka (@caesura)
on CodePen.

Author: Natalie Frecka, @caesura
Links: Source Code / Demo
Created on: December 13, 2015
Made with: HTML, CSS

07. Animated CSS Filter Blur

See the Pen
Animated CSS filter blur
by yoichi kobayashi (@ykob)
on CodePen.

Author: yoichi kobayashi, @ykob
Links: Source Code / Demo
Created on: April 24, 2022
Made with: HTML, CSS

08. Cross-Browser Image Blur with Transition

See the Pen
Cross-Browser Image Blur With Transition
by Dudley Storey (@dudleystorey)
on CodePen.

Author: Dudley Storey, @dudleystorey
Links: Source Code / Demo
Created on: July 28, 2012
Made with: HTML, CSS

09. Text Blurring Animation

See the Pen
Text blurring animation
by Andrew Burton (@onge)
on CodePen.

Author: Andrew Burton, @onge
Links: Source Code / Demo
Created on: December 02, 2014
Made with: HTML, CSS

10. Rollover CSS Blur Filter Image Gallery

<

See the Pen
Rollover CSSS Blur Filter Image Gallery
by sjmcpherson (@sjmcpherson)
on CodePen.

Author: sjmcpherson, @sjmcpherson
Links: Source Code / Demo
Created on: May 03, 2013
Made with: HTML, CSS

11. A Blurred Overlay

See the Pen
A blurred overlay
by Glenn Reyes (@glennreyes)
on CodePen.

Author: Glenn Reyes, @glennreyes
Links: Source Code / Demo
Created on: September 10, 2015
Made with: HTML, CSS

12. CSS Filter Cards

See the Pen
CSS Filter Cards
by Steve Meredith (@steveeeie)
on CodePen.

Author: Steve Meredith @steveeeie
Links: Source Code / Demo
Created on: May 06, 2019
Made with: HTML, CSS

13. Full Bleed Background Images with CSS3 Filter

See the Pen
Full bleed background images with CSS3 filter
by bookcasey (@bookcasey)
on CodePen.

Author: bookcasey @bookcasey
Links: Source Code / Demo
Created on: March 12, 2013
Made with: HTML, CSS

14. CSS3 Blur Filter Animation

See the Pen
CSS3 blur filter animation
by Dorian Nowak (@01miru)
on CodePen.


Author: Dorian Nowak @01miru
Links: Source Code / Demo
Created on: September 06, 2012
Made with: HTML, CSS

15. Draggable Blur Mask Over Image

See the Pen
Draggable blur mask over image
by marcruecker (@marcruecker)
on CodePen.

Author: marcruecker @marcruecker
Links: Source Code / Demo
Created on: July 01, 2016
Made with: HTML, CSS

16. CSS Directional Motion Blur

See the Pen
CSS Directional Motion Blur
by XYZt (@flyorboom)
on CodePen.

Author: XYZt @flyorboom
Links: Source Code / Demo
Created on: December 30, 2019
Made with: HTML, CSS

17. Intrinsic Ratio Blur

Intrinsic Ratio Blur

Author: Charlotte Dann, @pouretrebelle
Links: Source Code / Demo
Created on: January 24, 2015
Made with: HTML, CSS

18.  CSS Variables with JS

 CSS Variables w/ JS

Author: Joshua Ward @joshuaward
Links: Source Code / Demo
Created on: September 15, 2017
Made with: HTML, CSS, JS

19. Frosted Glass Effect

Frosted Glass Effect 

Author: Usama Tahir @AmJustSam
Links: Source Code / Demo
Created on: July 18, 2017
Made with: HTML, CSS

20. Bokeh Pattern

See the Pen
Bokeh Pattern
by Owlypixel (@owlypixel)
on CodePen.


Author: Owlypixel @owlypixel
Links: Source Code / Demo
Created on: March 08, 2017
Made with: HTML, CSS, JS

21. Blurred Video Effect with CSS Filter

See the Pen
Blurred video effect w/ CSS filter ????
by Jhey (@jh3y)
on CodePen.

>

Author: JHEY, @jh3y
Links: Source Code / Demo
Created on: November 9, 2019
Made with: HTML, CSS, JS

22. I ♥ Blur

See the Pen
I ♥ BLUR
by simurai (@simurai)
on CodePen.

Author: simurai @simurai
Links: Source Code / Demo
Created on: April 19, 2013
Made with: HTML, CSS