27 CSS Blur Effects
This collection thoroughly demonstrates the flexibility of CSS filter: blur() and its high-performance counterpart, backdrop-filter. You’ll see how these properties are used to create the iconic “frosted glass” effect on the background and implement dynamic “focus” or “depth of field” by animating the blur radius.
Last updated:
Text Animation
An elegant, cinematic text reveal where each letter smoothly ’emerges’ from the mist, lending significance and visual weight to the phrase.
Blurry Loading
As the counter reaches 100%, the blurry image sharpens into focus, while the counter itself dissolves and fades away, revealing the content.
Blurry Loading Page Animation
The use of a pure JavaScript timer for step-by-step update of the loading state, with synchronized inverse change of opacity for the counter and filter: blur for the background element.
Rainbow Shadow Button
Featuring a modern aesthetic, this button generates a soft aura using a blurred and offset pseudo-element whose color dynamics are precisely controlled by the oklch function and longer hue interpolation within the linear-gradient.
CSS Sticky Progressive Blur on Scroll
A progressive blur on scroll effect is implemented, where a sticky element utilizes backdrop-filter: blur() to dynamically change its transparency and blur strength as content scrolls underneath, creating a modern UI “fade-out” effect.
Progressive Blur with Animation
A demonstration of smooth progressive image blurring using the CSS @property feature to define animatable custom variables. The effect is achieved by layering a blurred pseudo-element with a mask-image: linear-gradient() mask, creating a dynamic focus effect on hover.
Fancy Banners
A stylish “hipster” image card featuring a lifted paper effect created with rotated pseudo-elements and shadows.
Blockquote
Elegant typography for a blockquote where the hanging-punctuation CSS property pushes quotes outside the text, and text-wrap: balance automatically balances line lengths. Visual emphasis is created with a ::before pseudo-element that adds a blurred background, creating a glow effect behind the text.
Cross-Browser Image Blur With Transition
A relevant example showing how to use CSS transition to smoothly transition an image from a blurred to a sharp state on hover. A multi-tiered filter implementation (including an SVG fallback) is used to ensure identical smoothness and performance of the blur effect across different browsers.
