I still remember the first time I shipped a frosted glass header and wondered why it looked sharp on my laptop but muddy on a mid-range phone. That moment pushed me to really understand how blur() behaves, how much it costs in rendering time, and what design choices actually hold up across devices. If you have ever tried to soften a hero image, build a background haze behind a modal, or reduce distraction by de-emphasizing content, you have already reached for the blur() function. The effect feels simple, but the details matter: how the blur radius is interpreted, how it interacts with layout and compositing, and how to keep it performant while still looking intentional.

You are going to get a clear, practical view of blur() as it exists in modern CSS. I will show you how the function works, where it shines, where it bites back, and the implementation patterns I trust in production. We will cover syntax, units, visual results, performance ranges, accessible fallbacks, and the mental model I use to avoid common mistakes. You will also see complete, runnable examples that you can paste into a file and test immediately.

How blur() Works in CSS Filters

The blur() function is part of the CSS filter property. Conceptually, it applies a Gaussian blur to the pixels of an element as it is painted. The key to remember is that this happens during the rendering phase, after layout and paint for the element are already determined. In practice, that means blur() does not change the element’s layout box, but it absolutely changes how much space the visual effect appears to occupy.

The function takes a single length value called the blur radius. The browser uses that radius to determine how much neighboring pixel data to mix into each pixel. A larger radius means more neighboring pixels are sampled, which produces a softer, more out-of-focus look. A blur radius is not a percentage of the element size; it is a physical length based on CSS units like px, rem, or %. For most UI work, px and rem are the safest choices because their results are more predictable across screen densities and font scaling.

One detail I rely on: the visual spread of a blurred element extends beyond its original boundary. This is why you often see blur clipped at container edges if overflow is hidden. If you blur an image inside a card with overflow: hidden, the blur will be visibly cut off at the edges. Sometimes that is desirable, but often it is a surprise. If you need the blur to glow outward, you either provide extra padding or blur a larger layer behind the visible container.

Another nuance that bites people: the blur is applied after the element is rendered, which means effects like box-shadow, borders, and text are blurred too if they are part of the element. If you want only the background to blur while keeping text sharp, you must separate layers (for example, with a pseudo-element) and apply filter to the background layer only.

Syntax and Practical Parameter Choices

The syntax is simple:

filter: blur(12px);

That simplicity hides a few choices you should make deliberately:

• Unit selection: I use px for precise visual tuning and rem when the blur should scale with the user’s font size. rem helps maintain a consistent softness relative to the rest of the UI.
• Zero is valid: blur(0) is useful for toggling the effect without changing code paths. It allows you to keep a single class and update a custom property or state.
• Large values: Anything above about 20px on normal-sized UI elements quickly becomes heavy and can create muddy edges. For large backgrounds or hero images, 20–40px can be acceptable, but I usually blur a downscaled layer instead of the full-size asset.

A subtle point: blur() requires a length, not a percentage of the element size. A percentage may be accepted in some browsers but it is not as reliable. Stick with px or rem for consistent output.

Visual Intent: When Blur Helps and When It Hurts

Blur is great for guiding attention. You can blur non-primary elements while keeping the focus on a foreground component. I often use it for:

• Background images behind a text block to increase contrast without changing the image content
• Softening repeated textures so they do not compete with foreground typography
• De-emphasizing inactive cards or sections during a progressive reveal
• Creating a depth cue in data dashboards, so the currently active panel stands out

Where blur hurts:

• Small text or thin line art: even a 2px blur can make text illegible.
• High-density iconography: icons with fine details lose their crispness quickly.
• Performance-sensitive animations: animating blur radius at 60fps is expensive on many devices.

If you are blurring content that the user must read, stop and reconsider. Blur is a visual cue, not a substitute for state change. If the content is still important, reduce opacity or shift contrast instead.

Complete Example: Single Image Blur

This example blurs a logo while keeping the headline sharp. It also shows a mild shadow so the blurred image does not look cut off.

:root {
--brand-green: #1b7f3b;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
font-family: ‘Georgia‘, serif;
background: #f5f7f3;
color: #1f2a1f;
}
.card {
background: #fff;
padding: 40px 48px;
border-radius: 18px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
text-align: center;
width: min(540px, 90vw);
}
h1 {
margin: 0 0 16px;
color: var(--brand-green);
font-size: 2.4rem;
letter-spacing: 0.5px;
}
.blurred {
filter: blur(5px);
margin-top: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
img {
width: 200px;
height: auto;
display: inline-block;
}




Brand Focus
Sharp heading, softened graphic.

Notes from my own usage:

• I add a shadow when the blur is moderate because the edge of the blur can feel too soft. The shadow gives the eye a boundary.
• I keep blur between 3–8px for small graphics. If I want a stronger effect, I reduce opacity instead of cranking up blur.

Example: Comparing Multiple Blur Values

When you want to teach your team how blur scales, it helps to show multiple values side by side. Here is a complete example using Flexbox. The key detail is that all images are the same size; only the blur radius changes.

body {
margin: 0;
padding: 32px;
font-family: ‘Source Serif 4‘, serif;
background: #f1efe9;
color: #243028;
}
h1 {
margin-bottom: 20px;
font-size: 2rem;
}
.row {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
}
.tile {
background: #fff;
padding: 12px;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
text-align: center;
width: 140px;
}
img {
width: 80px;
height: 80px;
display: block;
margin: 0 auto 8px;
}
.blur-none { filter: blur(0); }
.blur-med { filter: blur(3px); }
.blur-large { filter: blur(1.5rem); }



Blur Radius Comparison



blur(0)



blur(3px)



blur(1.5rem)

I often replace logo.png with any neutral icon or pattern so the blur effect reads clearly. If you use a high-contrast photo, the strongest blur can look like a low-quality image rather than an intentional effect.

Performance and Rendering Costs

Blur is not a free effect. It typically triggers the browser to render the element into an offscreen buffer and then apply a pixel-based filter. On modern desktops, small blur values on small elements might cost around 1–4ms per frame. On mid-range phones, that can climb to 8–15ms per frame, which already eats most of your 16ms budget for 60fps.

Here is how I keep it under control:

• Avoid animating blur radius: toggling the blur class on and off is cheaper than smooth animation. If you must animate, do it once and then settle on a static value.
• Blur smaller layers: blur a downscaled image and then scale it up, or blur a pseudo-element with a smaller background image.
• Avoid blurring large videos: a blurred video frame is expensive; if you need a blurred background, consider a static poster or use a pre-blurred fallback image.
• Contain complexity: filter interacts with stacking contexts and compositing. Keep the blurred element isolated so the browser can optimize it without re-rendering the whole page.

I also test blur performance using browser devtools’ rendering metrics. In 2026, most devtools offer a rendering cost or frames view. I target a blur cost low enough that my interaction animations stay smooth.

Common Mistakes I See in Code Reviews

I review a lot of CSS, and blur mistakes show up constantly. Here are the top ones and how I fix them:

• Clipping blur at container edges: If the container has overflow: hidden, the blur is cut off. Fix by adding padding, or apply the blur to a pseudo-element that is larger than the visible area.
• Blurring readable text: If the user needs to read it, don’t blur it. Use opacity or reduce contrast instead.
• Animating blur on scroll: This causes frame drops in many browsers. If you want a dynamic blur, use a small range (0–4px) and throttle updates.
• Using very large blur values: Large values create a foggy look that often feels accidental. If you need big softness, reduce image resolution first and then apply a smaller blur.
• Forgetting fallbacks: Not all environments render filters smoothly. Always provide a reasonable fallback color or background layer.

If you remember only one rule: blur should be the first thing you remove when you are debugging a performance issue.

Practical Patterns I Trust

Here are a few patterns that I use regularly because they are predictable and safe.

Pattern 1: Frosted Header with Backdrop Layer

This uses backdrop-filter, which blurs what is behind the element, not the element itself. It is not the same as filter: blur() but often the visual goal is identical. When backdrop-filter is unavailable, I fall back to a translucent background.

<div class='headercontent‘>Dashboard