Up to 70% off on hosting for WordPress Websites $2.95 /mo

Csshint recommends hosting

css

12 CSS Blur Effects

2 years ago

Latest Collection of 100% free HTML and CSS Blur Effects code examples from Codepen.

Shifting Depth of Field

Shifting Depth of Field

Author

Thomas Trinca

Made with

HTML / CSS

Demo / Code Get Hosting

Blurred, Invisible Ink css

Blurred, Invisible Ink, and Redacted text (CSS only)

Author

Adam Ruf

Made with

HTML / CSS

Demo / Code Get Hosting

Loading Animation CSS

Loading Animation CSS

Author

Tatsuya Azegami

Made with

HTML / CSS (SCSS)

Demo / Code Get Hosting

Blur Buttons CSS

Blur Buttons CSS

Author

Natalie Frecka

Made with

HTML / CSS (SCSS)

Demo / Code Get Hosting

A blurred overlay

A blurred overlay

Author

Glenn Reyes

Made with

HTML / CSS (SCSS)

Demo / Code Get Hosting

Hover effect blur

Hover effect blur

Author

Hervé

Made with

HTML / CSS (SCSS)

Demo / Code Get Hosting

Text blurring animation

Text blurring animation

Author

Andrew Burton

Made with

HTML / CSS

Demo / Code Get Hosting

out of focus text effect

In/out of focus text effect

Author

Jonny Scholes

Made with

HTML / CSS (SCSS)

Demo / Code Get Hosting

Cross-Browser Image Blur With Transition

Cross-Browser Image Blur With Transition

Author

Dudley Storey

Made with

HTML / CSS

Demo / Code Get Hosting

CSS Blur Effects

I ♥ BLUR

Author

simurai

Made with

HTML / CSS

Demo / Code Get Hosting

Rollover CSSS Blur Filter Image Gallery

Rollover CSSS Blur Filter Image Gallery

Author

sjmcpherson

Made with

HTML (Haml) / CSS (Less)

Demo / Code Get Hosting

Pure CSS Text Blur

Pure CSS Text Blur

Author

Derek Peruo

Made with

HTML / CSS (SCSS)

Demo / Code Get Hosting