Collection of free HTML and pure CSS blur effect code examples from Codepen and other resources.

Demo image: CSS Directional Motion Blur

Author

  • XYZt

Made with

  • HTML / CSS

About a code

CSS Directional Motion Blur

Motion/directional blur in pure HTML/CSS with the use of filter:blur and inverse scaling on parent and child.

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

Responsive: yes

Dependencies: -

Demo image: Shifting Depth of Field

Author

  • Thomas Trinca

Made with

  • HTML / CSS

About a code

Shifting Depth of Field

A demo intended to mimic the shifting depth of field of a camera lens using blur filters and keyframes.

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

Responsive: yes

Dependencies: -

Author

  • Karlo Videk

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Motion Blur

CSS keyframes animation of a ball with motion blur. Animation made with only one element.

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

Responsive: no

Dependencies: -

Demo image: Blurred, Invisible Ink, and Redacted Text

Author

  • Adam Ruf

Made with

  • HTML / CSS (SCSS)

About a code

Blurred, Invisible Ink, and Redacted Text

Exploring some ways of visually hiding or obscuring text with CSS filters and pseudo-elements.

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

Responsive: yes

Dependencies: bootstrap.css

Demo image: Blur Buttons

Author

  • Natalie Frecka

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Blur Buttons

Buttons blur on or un-blur on hover.

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

Responsive: no

Dependencies: -

Author

  • Tatsuya Azegami

Made with

  • HTML / CSS (SCSS)

About a code

Loading Animation CSS

Text blur animation CSS only.

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

Responsive: yes

Dependencies: -

Demo image: A Blurred Overlay

Author

  • Glenn Reyes

Made with

  • HTML / CSS (SCSS)

About a code

A Blurred Overlay

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

Responsive: yes

Dependencies: -

Author

  • Jonny Scholes

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

In/Out of Focus Text Effect

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

Responsive: no

Dependencies: -

Author

  • Andrew Burton

Made with

  • HTML / CSS

About a code

Text Blurring Animation

Text animates in from being blurred to crisp and out again. Uses CSS3 animations and text-shadow.

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

Responsive: yes

Dependencies: -

Author

  • HervĂ©

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Hover Effect Blur

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Text Blur

Author

  • Derek Peruo

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Text Blur

A simple text blur effect using pure CSS.

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

Responsive: no

Dependencies: -

Author

  • sjmcpherson

Made with

  • HTML (Haml) / CSS (Less)

About a code

Rollover CSSS Blur Filter Image Gallery

Utilizing CSS transitions & transforms and the CSS blur filter.

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

Responsive: no

Dependencies: -

Author

  • simurai

Made with

  • HTML / CSS

About a code

I LOVE BLUR

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

Responsive: no

Dependencies: -

Demo image: Cross-Browser Image Blur With Transition

Author

  • Dudley Storey

Made with

  • HTML / CSS

About a code

Cross-Browser Image Blur With Transition

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

Responsive: no

Dependencies: -