Web & Graphics,Web Design

21 CSS Blur Effects Examples

CSS filters can be used to affect how an image is presented. It is an exciting CSS feature that allows you to apply a filter on the background of an element. It may also be used with CSS animation to produce eye-catching effects and provide life to an otherwise static element. So, in this post, we’ve gathered 21 Stunning CSS Image & Text Effect Blur Examples that might be used in a future project or for learning a new technique in your quest to learn more about front-end development.

The CSS “filter” attribute gives an element visual effect. As a result, you may apply the “blur” effect to an element using the CSS syntax “filter: blur().” The “blur” filter gives the element a gaussian blur.

You may modify the blur strength by selecting several pixels for the screen to mix into each other. The Blur becomes more extreme as the pixel value increases.

1. Cross-Browser Image Blur with Transition

Download Source Code

View demo

Made With: HTML and CSS

Author: Dudley Storey

Compatible With: Chrome, Edge, Firefox, Opera, Safari

2. Rollover CSS Blur Filter Image Gallery

Download Source Code

View demo

Made With: HTML and CSS

Author: Simurai

Compatible With: Chrome, Edge, Firefox, Opera, Safari

3. Rollover CSS Blur Filter Image Gallery

Download Source Code

View demo

Made With: HTML (Haml) and CSS (less)

Author: Sjmcpherson

Compatible With: Chrome, Edge, Firefox, Opera, Safari

 4. Pure CSS Text Blur

Download Source Code

View demo

Author: Derek Peruo

Compatible With: Chrome, Edge, Firefox, Opera, Safari

5. Hover Effect Blur

Download Source Code

View demo

Made With: HTML (pug) / CSS(SCSS)

Author: Herve

Compatible With: Chrome, Edge, Firefox, Opera, Safari

6. Text Blurring Animation

Download Source Code

View demo

Made With: HTML and CSS

Author: Andrew Burton

Compatible With: Chrome, Edge, Firefox, Opera, Safari

7. In/out of Focus Text Effect

Download Source Code

View demo

Made With: HTML (pug) and CSS

Author: Jonny Scholes

Compatible With: Chrome, Edge, Firefox, Opera, Safari

8. A Blurred Overlay

Download Source Code

View demo

Made With: HTML and CSS

Author: Glenn Reyes

Compatible With: Chrome, Edge, Firefox, Opera, Safari

 9. Loading Animation CSS

Download Source Code

View demo

Made With

Author

Compatible With

10. Blur Buttons

Download Source Code

View demo

Made With: HTML and CSS

Author: Natalie Frecka

Compatible With: Chrome, Edge, Firefox, Opera, Safari

11. Blurred, Invincible, and Redacted Text

Download Source Code

View demo

Made With: HTML and CSS

Author: Adam Ruff

Compatible With: Chrome, Edge, Firefox, Opera, Safari

12. Pure CSS Motion Blur

Download Source Code

View demo

Made With: HTML and CSS

Author: Karlo Videk

Compatible With: Chrome, Edge, Firefox, Opera, Safari

13. Shifting Depth of Field

Download Source Code

View demo

Made With: HTML and CSS

Author: Thomas Trinca

Compatible With: Chrome, Edge, Firefox, Opera, Safari

14. CSS Directional Motion Blur

Download Source Code

View demo

Made With: HTML and CSS

Author: XYZt

Compatible With:  Chrome, Edge, Firefox, Opera, Safari

15. Full Bleed Background images with CSS3

Download Source Code

View demo

Made With: HTML and CSS

Author: unknown

Compatible With: Chrome, Edge, Firefox, Opera, Safari

16. Dynamic Inside Blur Pure CSS

Download Source Code

View demo

Made With: HTML, CSS and JS

Author: Unknown

Compatible With: Chrome, Edge, Firefox, Opera, Safari

17. Intrinsic Ratio Blur

Download Source Code

View code

Made With: HTML, CSS and JS

Author

Compatible With

18. Text Over Any Background

Download Source Code

View demo

Made With: HTML, CSS and JS

Author: Unknown

Compatible With: Chrome, Edge, Firefox, Opera, Safari

19. Progressive Blur with CSS and SVG

Download Source Code

View Demo

Made With: HTML and CSS

Author: Unknown

 Compatible With: Chrome, Edge, Firefox, Opera, Safari

20. Light Box with Zoom and Blur Effect

Download Source Code

View demo

Made With

Author

Compatible With

21. Draggable Blur Mask

Download Source Code

View Demo

Made With

Author

Compatible With

Conclusion

When used incorrectly or too frequently, Blur can give your users the impression that they are visiting your site after a week-long binge, giving them a headache. Effect blur is frequently paired with a “undo” transition to remedy this.

The blur effect is identical to the Gaussian Blur filter in PhotoShop; because of its inclusion in CSS and SVG, we can now get the same results on the web.

Sudipta Gupta

Share to...