Summarize this article with:
Frosted glass cards, soft background overlays, hover transitions that feel alive. All achievable with native browser support.
You’ll learn how to apply Gaussian blur to images, text, and backgrounds. We’ll cover the exact syntax, practical code snippets, and performance considerations that matter in production.
By the end, you’ll have working examples for hero sections, CSS card hover effects, modal overlays, and animated blur transitions ready to drop into your projects.
What is CSS Blur Effect
CSS blur effect is a visual filter function that applies Gaussian blur to HTML elements through the filter property or backdrop-filter property.
The blur() function accepts a radius value in pixels that determines how many pixels blend together on screen.
A larger blur radius creates more intense softening. A value of 0 leaves the element unchanged.
Modern browsers render blur effects using GPU acceleration. This makes real-time blur animations smooth and performant on most devices.
You’ll find blur effects everywhere in contemporary user interface design. Frosted glass overlays, background image softening, focus states, loading transitions.
CSS Blur Effect Examples To Check Out
Animated CSS Filter Blur
See the Pen
Animated CSS filter blur by yoichi kobayashi (@ykob)
on CodePen.
CSS Filter Cards
See the Pen
CSS Filter Cards by Steve Meredith (@steveeeie)
on CodePen.
Gradient Blur Text Effect In Pure CSS
Shifting Depth Of Field
Dynamic Inside Blur Pure CSS
Gooey Blurry Text Morph Effect
Pure CSS Motion Blur
CSS3 Blur Filter Animation
Inline CSS Blur for Mozilla
Blurry VHS Image Effect Filter
Blurred Text & Images In HTML CSS
Blur Buttons
I Love Blur
Black Mirror Style Cracked Glitchy Text Effect
Blur Effect Using CSS Blur() Filter On A Small Image
Creating a blurry background image
Loading Animation CSS
Rollover CSS Blur Filter Image Gallery
Pop-Up With Blurred Background Animation
Horror Move Style Blurry Text Coming Into Focus Text Animation
A Blurred Overlay
Hover Effect Blur
Blurry Loading Quote Animation Effect
In/Out Of Focus Text Effect
Blurred, Invisible Ink, And Redacted Text
Heat Haze / Heat Shimmer Blurr Effect
Text Blurring Animation
Full Bleed Background images with CSS3
Blurry Lazy Load Images
Recreating Canva’s Blur Effect
Pure CSS Text Blur
Slick Slideshow with Blur Effect by Fabio Ottaviani
Pure CSS Toggle Blur Layer Visibility Using On/Off Buttons
Progressive blur with CSS & SVG
Pure CSS Blurred Video Background Login Box by Lokesh Suthar
Cross-Browser Image Blur With Transition
Draggable Blur Mask
CSS Text Transform with Blur by Ambika Castle
Pure CSS Video Blur Effect
Blurry Background
Glitched & Blurred CSS Worms by Fabio Ottaviani
How CSS Blur Works in Browsers
Browsers apply a Gaussian blur algorithm to each pixel. The blur radius determines how far the averaging extends.
Chrome, Firefox, Safari, and Edge all support the filter blur function natively. WebKit browsers use the -webkit-filter prefix for older versions.
What is the filter Property in CSS
The CSS filter property applies graphical effects to elements. Blur, brightness, contrast, grayscale, and more.
Syntax is straightforward: filter: blur(5px);
Multiple filters chain together in sequence. The browser processes them left to right.
What is the backdrop-filter Property in CSS
The backdrop-filter property blurs what’s behind an element rather than the element itself.
This creates the popular frosted glass effect. Semi-transparent backgrounds with blur applied to underlying content.
Perfect for modal overlays, sticky navigation bars, and card designs that float over images.
What is Gaussian Blur in CSS
Gaussian blur uses a mathematical function to average pixel colors. Named after Carl Friedrich Gauss.
The algorithm weights nearby pixels more heavily than distant ones. This produces natural-looking softness rather than uniform smearing.
How to Apply CSS Blur to Elements
Applying blur requires choosing between filter and backdrop-filter. Each serves different purposes.
Filter blur affects the element and all its children. Backdrop-filter only affects the background layer.
How to Blur Images with CSS filter
Target the image element directly with filter: blur().
“ img { filter: blur(8px); } `
The entire image softens. Text or other content placed over it remains crisp.
How to Blur Background Images in CSS
Two approaches work well here.
First method uses a pseudo-element with the background image and applies filter blur to it:
` .hero::before { content: ""; position: absolute; background-image: url('image.jpg'); filter: blur(10px); z-index: -1; } `
Second method uses backdrop-filter on a semi-transparent overlay positioned above the hero image.
How to Create Frosted Glass Effect with backdrop-filter
The CSS glassmorphism trend relies on this technique.
` .glass-card { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.3); } `
The semi-transparent background combined with blur overlay creates depth. Content underneath shows through softly.
How to Blur Text with CSS
Text blur works for reveal animations, privacy masking, or artistic effects.
` .blurred-text { filter: blur(4px); transition: filter 0.3s ease; }
.blurred-text:hover { filter: blur(0); } `
Users hover to reveal hidden content. Works well for spoiler text or progressive disclosure patterns in user experience design.
CSS Blur Effect Examples
Real-world implementations show how blur transforms ordinary layouts into polished interfaces.
These examples cover common patterns you’ll encounter in production websites.
Background Blur for Hero Sections
Hero sections often feature bold imagery with text overlays. Blurring the background improves text readability.
` .hero-section { position: relative; }
.hero-background { filter: blur(5px); transform: scale(1.1); } `
The scale(1.1) prevents blurred edges from showing. Blur extends beyond visible boundaries.
This technique works great for landing page designs where the call-to-action needs to stand out.
Glassmorphism Card Effect
Cards that float over busy backgrounds benefit from glassmorphism styling.
` .glass-card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } `
The frosted glass aesthetic feels premium and modern. Popular in dashboard interfaces and CSS cards design.
Image Hover Blur Transition
CSS hover effects with blur create engaging micro-interactions.
` .gallery-image { transition: filter 0.4s ease; }
.gallery-image:hover { filter: blur(3px) brightness(0.8); } `
Combine blur with other filters for layered effects. The CSS gallery feels interactive and alive.
Loading State Blur Animation
Blur transitions work well for loading states. Content starts blurred and sharpens as it loads.
` .loading-content { filter: blur(20px); animation: sharpen 1s forwards; }
@keyframes sharpen { to { filter: blur(0); } } `
This feels smoother than abrupt content popping. Users perceive faster load times.
Combine with skeleton screens for professional loading experiences.
Depth of Field Blur Effect
Simulating camera depth of field draws attention to specific elements.
` .background-layer { filter: blur(8px); }
.midground-layer { filter: blur(3px); }
.foreground-layer { filter: blur(0); } `
Layered blur creates visual hierarchy. The sharpest element captures focus first.
This technique enhances CSS parallax effects and immersive scrolling experiences.
Modal Overlay Background Blur
CSS modals look sharper when the background blurs on open.
` .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); } `
Users focus on modal content. The blurred background signals context without distraction.
Navigation Bar with Blur Background
Fixed headers with backdrop blur maintain readability over scrolling content.
` .navbar { position: fixed; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } `
Apple’s website popularized this pattern. Now standard in modern CSS header design.
Blurred Image Placeholder Effect
Low-quality image placeholders (LQIP) use blur for progressive loading.
` .placeholder { filter: blur(20px); transform: scale(1.1); }
.loaded { filter: blur(0); transition: filter 0.5s; } `
Tiny base64 images load instantly, blur hides pixelation, full image fades in crisp.
Progressive Blur on Scroll
CSS scroll effects with JavaScript create dynamic blur intensity.
` window.addEventListener('scroll', () => { const blur = Math.min(scrollY / 50, 10); element.style.filter = blur(${blur}px); }); `
Content softens as users scroll down. Pairs well with parallax scrolling layouts.
Text Reveal Blur Animation
CSS text animations using blur create cinematic reveals.
` @keyframes textReveal { 0% { filter: blur(10px); opacity: 0; } 100% { filter: blur(0); opacity: 1; } }
.reveal-text { animation: textReveal 1.2s ease-out forwards; } `
Letters emerge from soft focus. Dramatic for above the fold headlines.
CSS Blur Property Values and Syntax
Understanding syntax details prevents common mistakes and enables precise control.
What Blur Radius Values to Use
Blur radius accepts pixel values, rem, and em units. Percentages don’t work.
- 1-3px: Subtle softening, text remains readable
- 5-10px: Noticeable blur, good for backgrounds
- 15-25px: Heavy blur, content becomes abstract
- 30px+: Extreme blur, colors blend into gradients
Start conservative. You can always increase blur intensity later.
How to Combine Blur with Other Filters
Chain multiple filter functions in a single declaration.
` .combined-effect { filter: blur(3px) brightness(1.1) contrast(1.05) saturate(1.2); } `
Order matters. Filters apply left to right, each affecting the previous result.
Combine with CSS shadow effects for depth.
How to Animate Blur with CSS Transitions
The filter property animates smoothly with CSS animation and transitions.
` .blur-transition { filter: blur(0); transition: filter 0.3s ease-out; }
.blur-transition:hover { filter: blur(5px); } `
Use CSS keyframes for complex multi-step blur sequences.
Browser Support for CSS Blur
Blur effects work across all modern browsers but require fallbacks for edge cases.
Which Browsers Support filter blur
The filter property has excellent support:
- Chrome 53+
- Firefox 35+
- Safari 9.1+
- Edge 12+
Internet Explorer lacks support entirely. Plan fallbacks for legacy systems.
Which Browsers Support backdrop-filter
Backdrop-filter arrived later with narrower support:
- Chrome 76+
- Firefox 103+
- Safari 9+
- Edge 79+
Firefox held out until 2022. Test thoroughly for cross-browser compatibility.
How to Add Webkit Prefixes for Blur
Older Safari and iOS versions need the -webkit- prefix.
` .glass-effect { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } `
Always include both. The prefixed version first, standard second.
Performance Considerations for CSS Blur
Blur effects consume GPU resources. Poor implementation causes janky scrolling and battery drain.
How Blur Affects Rendering Performance
Every blur calculation samples surrounding pixels. Larger radius means more calculations per pixel.
Blur triggers compositor layers. Too many blurred elements fragment GPU memory.
Use will-change: filter to hint browser optimization, but sparingly.
What Blur Values Are GPU Intensive
Blur radius directly impacts performance:
- Under 10px: Minimal impact
- 10-20px: Moderate, watch on mobile
- 20px+: Heavy, avoid animating at this level
Large elements with large blur radius stress even powerful GPUs.
How to Optimize Blur for Mobile Devices
Mobile-first design requires careful blur implementation.
Reduce blur radius on smaller viewport sizes using media queries:
` @media (max-width: 768px) { .blur-element { backdrop-filter: blur(5px); / reduced from 15px / } } `
Consider removing blur entirely on low-power devices. Solid color fallbacks work fine.
Test on real devices. Emulators don’t accurately reflect GPU limitations.
FAQ on CSS Blur Effect Examples
What is the CSS blur effect?
The CSS blur effect applies Gaussian blur to elements using the filter property. The blur() function accepts a radius value in pixels that determines blur intensity. Higher values create stronger softening effects on images, text, and backgrounds.
How do I blur a background image in CSS?
Use a pseudo-element with the background image and apply filter: blur(10px) to it. Position content above with higher z-index. Alternatively, use backdrop-filter: blur() on a semi-transparent overlay element.
What is the difference between filter and backdrop-filter?
Filter blur affects the element itself and all children. Backdrop-filter only blurs content behind the element, leaving the element’s own content sharp. Use backdrop-filter for frosted glass effects and modal overlays.
How do I create a glassmorphism effect with CSS blur?
Combine a semi-transparent background like rgba(255,255,255,0.2) with backdrop-filter: blur(10px). Add subtle borders and box shadows for depth. This creates the popular frosted glass card aesthetic.
What blur radius values should I use?
Use 1-3px for subtle softening, 5-10px for noticeable background blur, and 15-25px for heavy abstract effects. Start with lower values and increase gradually. Values above 20px impact rendering performance significantly.
Does CSS blur work on all browsers?
Filter blur works on Chrome 53+, Firefox 35+, Safari 9.1+, and Edge 12+. Backdrop-filter has narrower support, arriving in Firefox only in 2022. Include -webkit- prefixes for older Safari versions.
How do I animate blur effects in CSS?
Apply transition: filter 0.3s ease for smooth blur changes on hover or state changes. Use CSS animation generators with keyframes for complex multi-step blur sequences and reveal animations.
Does CSS blur affect website performance?
Blur effects consume GPU resources. Larger blur radius values require more calculations per pixel. Keep blur under 20px for animations, reduce blur on mobile devices, and avoid applying blur to many elements simultaneously.
Can I blur only part of an image with CSS?
Use the CSS clip-path generator combined with layered elements. Create two image copies, blur one, then clip the blurred version to reveal sharp areas. SVG filters offer more precise regional blur control.
How do I add blur on hover in CSS?
Set initial state with filter: blur(0) and transition property. On hover, change to filter: blur(5px). The transition creates smooth CSS image effects. Combine with opacity or scale changes for richer interactions.
Conclusion
These CSS blur effect examples demonstrate how much visual polish a few lines of code can add. From backdrop-filter glassmorphism to animated text reveals, blur transforms flat designs into layered experiences.
The filter property and backdrop-filter cover nearly every blur scenario. Background softening, depth of field simulation, loading states, modal overlays.
Browser support is solid across Chrome, Firefox, Safari, and Edge. Just remember the -webkit- prefix for older versions.
Performance matters. Keep blur radius values reasonable, especially on mobile. Test on real devices.
Start with the code snippets here. Tweak the blur intensity, combine with CSS border animation or gradient generators, and build something that feels distinctly yours.
Blur isn’t decoration. It’s a tool for guiding attention and creating hierarchy.
