Blur Effect
A visual softening applied to an element or its background to create depth, focus, or glassmorphism.
Plain English
Blur is the visual equivalent of depth of field in photography — what is blurred is "out of focus" or in the background. In UI, blur has two main uses: frosted glass (blurring what is behind a panel to create translucency) and background dimming for modals (a blurred dimmed background focuses attention on the modal). When used subtly, blur adds sophistication; when overdone, it makes the interface feel sluggish and hard to read.
Technical
Two CSS properties: filter: blur(N) applies blur to the element itself; backdrop-filter: blur(N) blurs what is behind the element. Both trigger GPU compositing. backdrop-filter requires at least a partially transparent background to be visible. Performance: blur is expensive on large areas — limit to fixed/sticky elements rather than every-scroll paint. blur(4px) = soft; blur(8px) = medium; blur(16–24px) = strong glassmorphism. Supported in all modern browsers; Safari requires -webkit-backdrop-filter prefix.
Live Demo
No blur — solid overlay
Modal
Content behind is completely hidden
Backdrop blur — depth
Modal
Content behind is softened but visible
Backdrop blur creates depth and tells users content is behind the overlay, not gone.
Usage
✓ Good usage
Use backdrop-filter: blur(12px) on a sticky navigation bar with 85% opacity white background to create a premium frosted glass feel that respects the page content beneath.
✗ Bad usage
Applying filter: blur() to body text or headlines to indicate "locked" content — blurred text is unreadable and inaccessible.
Recommended values
- Frosted glass header: backdrop-filter: blur(12px) saturate(180%)
- Frosted glass card: backdrop-filter: blur(8px) + rgba background at 70–85% opacity
- Modal backdrop blur: backdrop-filter: blur(4px) + dark overlay
- Soft thumbnail behind loading state: filter: blur(8px)
- Avoid blur on text — only on backgrounds and images
Common mistakes
- backdrop-filter with a fully transparent background — it is invisible without some background opacity.
- Heavy blur (blur(40px)+) on large areas — causes performance problems during scroll.
- Applying blur to text — only ever blur background elements or images.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Apply backdrop-filter: blur(12px) saturate(180%) with background: rgba(255,255,255,0.85) to the sticky header for glassmorphism. For the modal overlay, use backdrop-filter: blur(4px) with a rgba(0,0,0,0.5) overlay.