Welcome to our article showcasing a curated collection of CSS Blur Effects! In this compilation, we have gathered an assortment of free HTML and pure CSS code examples sourced from platforms like Codepen, Github, and other valuable resources. This collection serves as a comprehensive guide for web designers and developers seeking to incorporate captivating blur effects into their projects.

With the power of CSS, you can effortlessly add depth, focus, and a touch of elegance to your web designs. Whether you're aiming for a subtle and refined effect or a bold and eye-catching visual, these blur techniques will undoubtedly elevate the aesthetics of your website.

As of February 2024, we are thrilled to present an update to our collection, featuring four brand new items. These additions reflect the latest trends and advancements in CSS blur effects, ensuring that you have access to the most cutting-edge techniques available.

By exploring this collection, you will discover a diverse range of blur effects, each accompanied by its respective code example. This allows you to easily implement these effects into your own projects, regardless of your level of expertise. Whether you're a seasoned developer or just starting out, this collection offers inspiration and practical solutions for all.

So, join us as we delve into this compilation of CSS blur effects, sourced from various platforms and updated with four exciting new additions. Unleash your creativity and transform your web designs with these mesmerizing blur effects, adding a touch of magic and allure to your online presence.

Demo image: A draggable popup window titled 'Draggable Popup With Backdrop Blur' displayed over a complex background of jumbled letters and symbols. The popup includes sliders for adjusting shadow size, blur size, and blur strength, and buttons labeled 'Get Knobs' and 'Reset'.

A Draggable Popup with Backdrop Blur in HTML & CSS

The HTML structure is quite simple, with a div element having a class of popup and an h1 tag inside it. The box-shadow and backdrop-filter properties are used to create a blur effect behind the popup. The mask property is used to create a gradient effect. The JavaScript makes the popup draggable using the jQuery UI’s draggable function. It also uses the Knobs library to create interactive knobs that allow the user to adjust the shadow size, blur size, and blur strength of the popup. Dependencies: jquery.js, jquery-ui.js, knobs.js.

Quote Effect using a CSS Blur Filter

The quote is broken down into individual span elements for each word or punctuation mark. Each span contains data attributes specifying the duration, delay, and blur amount for the animation. Specific styles are applied to animate the span elements from a blurred state to clear text. A JavaScript function animate() iteratively applies animation styles to each word based on its data attributes. After all words are animated, they return to their initial state and the animation repeats. Dependencies: tweenmax.js.

Dynamic Background Image with CSS Blur Effect

This code snippet is a great example of how CSS can be used to create visually appealing effects on web pages. The combination of a dynamic background image with a blur effect and animation can make a webpage more engaging and visually interesting. The div.bg-image is used to display the background image, while the div.bg-blur is used to create the blur effect. The .bg-blur class applies a blur effect to the background image. It uses the backdrop-filter property with a saturate(180%) blur(20px) value to increase the color saturation and apply a blur effect. The rgba(138, 42, 10, 0.25) value sets a semi-transparent dark overlay on the image. The .bg-blur class also includes a CSS animation named fade. This animation gradually changes the opacity of the div.bg-blur from 0 to 1, creating a fading effect. Responsive.

Demo image: Softly focused map. It predominantly features green and light blue colors, representing land and water bodies respectively. The map is adorned with red markers, possibly indicating specific locations or points of interest. Text labels are present but blurred, suggesting place names or geographical features. The image has rounded corners.

Smooth Blur

The div element is styled to have a width of 50vmin and an aspect ratio of 1/1, making it responsive and square-shaped. It has a border-radius of 2rem, giving it rounded corners. A box-shadow is applied for a subtle lifting effect. An ::after pseudo-element with a backdrop-filter is used to create a blur effect. The image inside the div is positioned absolutely and scaled to cover the entire div with some overflow, ensuring it fills the container while maintaining its aspect ratio.

Author

  • yoichi kobayashi

Made with

  • HTML / CSS (SCSS)

About a code

Animated CSS Filter Blur

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

Responsive: no

Dependencies: -

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: -

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Blurred Video Effect with CSS filter

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

Responsive: no

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 CSS 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: -