Make CSS blur stay within container boundaries

Stop CSS blur from bleeding outside its box using scale, clip and a pseudo-element fix

CSS filter: blur() is a fantastic tool for adding visual interest and depth to your web designs. It creates a soft, out-of-focus effect that can be used in various ways, from creating frosted glass backgrounds to subtle focus indicators. However, by default, the blur effect can sometimes overflow the boundaries of the element it’s applied to, leading to unexpected visual results. This article will guide you through techniques to keep that blur effect neatly contained within its intended space.

The problem with blur overflow

When you apply filter: blur() to an HTML element, the blurring process extends beyond the element’s dimensions. This can be problematic, especially if the blurred element is overlapping other content or has a background that you want to remain crisp.

Imagine blurring an image within a container. Without containment, the blurred edges might bleed into the surrounding areas, creating a less-than-ideal look.

Understanding the issue

There are two issues:

1. White edges from blur: the white edges typically occur because the blurred area extends beyond the actual content of the element, revealing the background color or transparency of the parent container. This can create a stark contrast, resulting in visible white or light-colored borders.
2. Background size and positioning: if the background image or color does not fully cover the area of the blurred element, the blur effect can expose the underlying container’s background, leading to these unwanted edges.

Solution to keep blur within container boundaries

To get rid of the white/transparent halo we have to give the blur filter extra pixels and then cut them off.

The shortest, GPU-friendly way to do both is:

1. Generate the extra pixels with transform: scale(1.05). The factor 1.05 can be adjusted as needed.
2. Slice them off with overflow: clip (not hidden).
3. Keep the markup clean by letting a pseudo-element carry the filter.

Contain CSS blur in 3 steps:

Step 1 – why the halo appears

The filter: blur() convolves the element’s alpha channel with a Gaussian kernel. Mathematically the kernel is infinite, but browsers truncate it after ±3σ (≈ 1.5 × the radius).

That means a blur(10px) needs at least 15px of transparent margin around the element. If the margin is not there the convolution folds the background color (usually white) back into the visible area – the halo.

Step 2 – why transform: scale() is the cheapest margin

We could enlarge the element with padding, width/height, or an extra wrapper, but each of those forces layout recalculation.

The transform: scale(1.05) is applied after layout (in the compositing phase), so the box metrics the rest of the page sees stay identical.

A 5% enlargement is enough for every practical blur radius ≤ 30 px. Increase the factor if you use bigger radii.

Step 3 – why overflow: clip instead of hidden

The overflow: hidden still lets descendants paint outside the box when they are promoted to their own compositing layer (CSS filters do exactly that).

The overflow: clip (and its older synonym clip) prevents all painting outside the padding-box, including the layer that the filter runs on.

Crucially, clip also suppresses the implicit compositing layer that hidden would create, so we save memory and keep the element on the regular paint phase – no extra texture upload to the GPU.

Optional speed boost: add will-change: transform to the pseudo-element

This hint tells the browser to keep the blurred layer on the GPU raster path, so if you later animate opacity or scale you won’t see a mid-transition rasterisation pop-especially noticeable on lower-end mobile GPUs.

Use it only when you plan motion. Otherwise leave it out to avoid wasting texture memory.

Workable example – putting it together

Explore a workable example on CodePen: