blur()

The CSS blur() function applies a Gaussian blur effect to an element, used to soften an element’s appearance when used with the CSS filter and backdrop-filter properties.

.element:hover {
  img {
    filter: blur(5px);
  }

  p {
    opacity: 1;
    visibility: visible;
  }
}

Hover over the image in the following demo to reveal text on top of the blurred image.

And thanks to hardware acceleration, the blur() effect runs smoothly across modern browsers!

The CSS blur() function is defined, among other filter functions, in the Filter Effects Module 1 specification.

Syntax

The blur() function accepts a single length value as an argument:

blur() = blur( <length>? )

Argument

/* Only takes a positive length value */
filter: blur(5px);
filter: blur(2rem);
filter: blur(1vw);

That <length> argument represents the intensity of the blur. It can be:

• A positive length (e.g., 5px, 1rem)
• Zero (0px), if no argument is passed

The blur() function doesn’t accept negative lengths or percentage values.

How it works

To blur an image, the browser doesn’t just randomly smudge everything. It performs a mathematical operation called a convolution.

Imagine looking at a single pixel in your image. To blur it, the browser needs to mix its color with the colors of its neighbours. But it doesn’t mix them equally. It gives the central pixel the most votes for the new color, and the neighbors get fewer votes the further away they are.

This system relies on the Gaussian function, which creates a specific shape known as a bell curve.

The browser translates that bell curve into a grid of numbers called a kernel. It centers this grid over every single pixel in your image, one pixel at a time. It multiplies the color values of the pixels underneath by the numbers in the grid (the weights) and adds them up. This computation can affect performance, but because the function is hardware-accelerated, you shouldn’t notice it.

The bottom line: (1) the Gaussian function tells the browser how much of the next color to bleed into the center, while (2) the radius argument tells the browser how far to reach from the center to find those colors.

When you write blur(10px), that 10px argument acts as the standard deviation. This number controls the width of the bell curve.

• Small argument (e.g., 2px): The bell curve is tall and skinny. The browser only listens to the immediate neighbours and more to the central pixel. The result is a sharp, subtle softness.
• Significant argument (e.g., 50px): The bell curve is short and wide. The browser listens to neighbours far away and less to the central pixel. The result is a heavy blur where shapes are hard to distinguish.

Basic usage

If you visit sites like Medium or Unsplash, you’ll see the blur() function used to simulate progressive loading, where an image appears to be blurred before it fully downloads and renders. This effect works by loading a tiny thumbnail (low KB), blurring it heavily to hide artifacts, then transitioning to the clear image once the site is fully loaded or when you navigate close to the content’s position on the page.

.image-container {
  overflow: hidden; /* Hide blurred edges */
}

.img-loading {
  filter: blur(20px);
  transform: scale(1.1); /* Scale up to hide white edges caused by blur */
  transition: filter 0.5s ease-out;
}

.img-loaded {
  filter: blur(0);
  transform: scale(1);
}

Glassmorphism effect

Glassmorphism is a popular UI effect introduced by Microsoft (with Windows Vista in 2006) to give an element a translucent glassy feel. The effect uses the CSS backdrop-filter property rather than the filter property, which targets and blurs the element’s background rather than the element itself.

.card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

Blurring modal backdrops

Modals are a widely used component that opens an element on top of everything else on the page. And behind that modal is a backdrop that sits between the modal and the rest of the page.

One thing you’ll often see is that the backdrop is blurs the content behind it as a way to make the modal stand out visually from the rest of the page. Adding a backdrop blur can soften the background while creating a sense of depth.

.modal-overlay {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

Comparing filter and backdrop-filter

I feel it’s crucial to address the difference between these two properties. You might have heard of filter and even used it, but backdrop-filter might sound new. It isn’t new. In fact, it was proposed by WebKit in 2014 and added to the Editor’s Draft specification the following year.

While the filter property applies the effect to the element’s pixels and its content, backdrop-filter applies the filter effect to the backdrop, that is, all content behind the element.

img {
  filter: blur(5px);
}

The image itself becomes blurry, as we saw on the prior demos.

div.glass {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.3);
}

The background behind the div becomes blurred, while the div’s text and borders remain crisp.

Caveats

While the blur() function creates beautiful effects, it comes with some gotchas that can slow down your app, drain a device’s batteries, or break your layout.

Edge bleeding

When blurring an element, the browser calculates the blur for the pixels at the very edge by mixing them with the pixels outside the component. Since the outside is usually transparent, the edges of your image fade out, creating a white-washed border.

To fix this issue, you can put the image in a container with overflow: hidden and scale it up (transform: scale(1.1)) so the blurry edges are pushed out of view. Otherwise, use a negative margin (e.g., margin: -10px) to move the blurred edges off-screen when using it on a background image.

Performance and battery drain

Blurring is mathematically expensive for the browser. As explained we explained before, the browser makes a computation for every single pixel. As a result:

• A blur(50px) is more expensive than blur(5px) because the browser has to work on a much larger area for every pixel.
• backdrop-filter is more resource-intensive than a standard filter because the browser has to render the entire scene behind the element first, then apply the filter, then composite the element on top.
• Animating a large blur on a 4K monitor or a low-end mobile device can cause frame rate drops and heat the device.

Stacking context surprises

Applying filter: blur() or backdrop-filter: blur() (or any filter, really) to an element creates a stacking context. If you have an element with a position: fixed inside a container that also uses a filter, the fixed element will stop working relative to the viewport. It becomes relatively fixed to the blurred container.

To avoid this issue, avoid putting position: fixed; elements inside a container that has a blur applied. Instead, keep them as siblings in the HTML structure.

Specification

The CSS blur() function is defined, among other filter functions, in the Filter Effects Module 1 specification, , which is currently in Editor’s Draft.

Browser support

The blur() function is currently supported on all browsers as of this writing. However, you might need to use the -webkit- prefix with the property when working with really old browsers.

.element {
  -webkit-backdrop-filter: blur(15px);
}

Related tricks!

References

• “Introducing Backdrop Filters” (WebKit Blog)
• “How to Create a Glassmorphism Effect with Pure CSS” (Gabriel Shoyombo)
• “Animating a blur” (Surma and Yi Gu)

Related