Collection of free HTML and pure CSS blur effect code examples

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.

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.

Animated CSS Filter Blur

CSS Directional Motion Blur

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

Blurred Video Effect with CSS filter

Shifting Depth of Field

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

Pure CSS Motion Blur

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

Blurred, Invisible Ink, and Redacted Text

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

Blur Buttons

Buttons blur on or un-blur on hover.

Loading Animation CSS

Text blur animation CSS only.

A Blurred Overlay

In/Out of Focus Text Effect

Text Blurring Animation

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

Hover Effect Blur

Pure CSS Text Blur

A simple text blur effect using pure CSS.

Rollover CSS Blur Filter Image Gallery

Utilizing CSS transitions & transforms and the CSS blur filter.

I LOVE BLUR

Cross-Browser Image Blur With Transition