CSS blur() Function

CSS blur() Function

The CSS blur() function applies a Gaussian blur to an element or the area behind it. It is used with the filter and backdrop-filter properties to soften images, text, backgrounds, and other visual content. The amount of blur is controlled by a length value, with larger values producing a stronger effect.

Syntax

blur()
blur(length)

The blur() function accepts one optional length value that determines the strength of the blur.

For example:

.example {
  filter: blur(5px);
}

This applies a Gaussian blur with a standard deviation of 5px.

The function can also be used without an argument:

.example {
  filter: blur();
}

When no value is supplied, the default is 0, producing no blur.

Common examples include:

filter: blur(0);
filter: blur(2px);
filter: blur(5px);
filter: blur(10px);
filter: blur(1rem);

The blur() function returns a CSS filter function value, not a length or color.

Parameters

The blur() function accepts one optional parameter.

The value can use CSS length units such as px, rem, or em.

Valid examples include:

blur()
blur(0)
blur(3px)
blur(0.5rem)
blur(1em)
blur(calc(2px + 3px))
blur(var(--blur-amount))

Percentage values are not permitted:

filter: blur(50%);

Negative values are also invalid:

filter: blur(-5px);

The function accepts only one length argument. Multiple comma-separated values are not supported.

How It Works

The blur() function uses a Gaussian blur to soften the visual details of an element.

Instead of displaying every pixel with its original sharpness, the browser blends nearby pixels to create a smoother appearance.

The supplied length controls the standard deviation of the Gaussian distribution used in the calculation.

For example:

.image {
  filter: blur(4px);
}

This produces a moderate blur across the image.

Increasing the value creates a stronger effect:

.image {
  filter: blur(12px);
}

The image becomes more blurred because the filter blends information across a wider area.

The blur value is not a fixed boundary around each pixel. It describes the standard deviation used by the Gaussian blur algorithm.

When applied through filter, the effect changes the element's rendered appearance without changing its dimensions or position in the document layout.

The underlying image or HTML content remains unchanged.

Blur Radius Values

The amount of blur depends on the length supplied to blur().

These descriptions are approximate. The visible result depends on the content, its dimensions, and the surrounding colors.

For example:

.light-blur {
  filter: blur(2px);
}
.medium-blur {
  filter: blur(5px);
}
.strong-blur {
  filter: blur(12px);
}

CSS relative length units can also be used:

.example {
  filter: blur(0.5rem);
}

The browser resolves the length according to the applicable CSS unit rules.

Using blur() with filter

The filter property applies the blur effect directly to the rendered element.

For example:

<div class="blur-box">Blurred Content</div>

.blur-box {
  padding: 20px;
  background-color: #0066cc;
  color: #fff;
  filter: blur(4px);
}

The background, text, and other rendered contents of the element are blurred together.

The function can also be applied to images:

img {
  filter: blur(5px);
}

To blur only a background image while keeping text sharp, place the background on a separate element or pseudo-element.

For example:

.panel {
  position: relative;
  isolation: isolate;
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #0066cc, #66ccff);
  filter: blur(8px);
}

The pseudo-element is blurred, while the panel's text remains unaffected.

Using blur() with backdrop-filter

The backdrop-filter property applies visual effects to the area behind an element instead of blurring the element's own content.

For example:

.overlay {
  background-color: rgb(255 255 255 / 35%);
  backdrop-filter: blur(8px);
}

The overlay's background is partially transparent, allowing the blurred content behind it to remain visible.

Unlike filter, which blurs the element itself, backdrop-filter blurs the backdrop visible through the element.

Compare these declarations:

.blurred-element {
  filter: blur(8px);
}
.blurred-backdrop {
  backdrop-filter: blur(8px);
}

The first declaration blurs the element and its rendered content. The second blurs the content behind the element.

A transparent or partially transparent background is usually needed to make a backdrop blur visible.

Backdrop blur is commonly used for translucent navigation bars, overlays, and floating panels.

Combining Filter Functions

The blur() function can be combined with other CSS filter functions.

For example:

.example {
  filter: blur(3px) grayscale(100%);
}

This blurs the element and removes its color.

Another example combines blur and brightness:

.example {
  filter: blur(4px) brightness(80%);
}

The element becomes blurred and darker.

Multiple filter functions are separated by spaces, not commas.

The browser applies the functions in the order they appear.

.example {
  filter: contrast(150%) blur(5px);
}

In this example, contrast is adjusted before the blur is applied.

The order can affect the final appearance, especially when combining blur with shadows, contrast adjustments, or color effects.

When a single filter function has an invalid value, the entire filter declaration can become invalid.

Transitions and Animations

The blur() function can be animated to create gradual changes between sharp and blurred content.

For example:

.blur-hover {
  filter: blur(0);
  transition: filter 0.3s ease;
}
.blur-hover:hover {
  filter: blur(5px);
}

When the pointer moves over the element, the blur gradually increases from 0 to 5px.

The effect can also be reversed:

.blur-reveal {
  filter: blur(6px);
  transition: filter 0.3s ease;
}
.blur-reveal:hover {
  filter: blur(0);
}

The element begins blurred and becomes sharp when hovered.

CSS animations can also control the blur amount:

@keyframes blur-effect {
  from {
    filter: blur(0);
  }
  to {
    filter: blur(8px);
  }
}
.animated-blur {
  animation: blur-effect 2s ease-in-out infinite alternate;
}

Continuous blur animations may require additional rendering work, particularly on large elements.

For interactive effects, consider the prefers-reduced-motion media query and avoid making important text difficult to read.

Example

The following example compares four different blur values using the same visual content.

Each box contains a blue circle and a smaller white circle, making the differences in edge sharpness easy to see.

HTML:

<div class="blur-demo">
  <div class="blur-item">
    <span>blur(0)</span>
    <div class="blur-shape blur-none"></div>
  </div>
  <div class="blur-item">
    <span>blur(2px)</span>
    <div class="blur-shape blur-light"></div>
  </div>
  <div class="blur-item">
    <span>blur(5px)</span>
    <div class="blur-shape blur-medium"></div>
  </div>
  <div class="blur-item">
    <span>blur(10px)</span>
    <div class="blur-shape blur-strong"></div>
  </div>
</div>

CSS:

.blur-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.blur-item {
  width: 130px;
  text-align: center;
}
.blur-item span {
  display: block;
  margin-bottom: 15px;
}
.blur-shape {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #0066cc;
}
.blur-shape::after {
  content: "";
  position: absolute;
  inset: 25px;
  border-radius: 50%;
  background-color: #fff;
}
.blur-none {
  filter: blur(0);
}
.blur-light {
  filter: blur(2px);
}
.blur-medium {
  filter: blur(5px);
}
.blur-strong {
  filter: blur(10px);
}

The first circle remains sharp because its blur value is 0.

The remaining circles become progressively softer as their blur values increase.

The CSS filter affects both the blue circle and its white center.

Backdrop Blur Example

The following example demonstrates how backdrop-filter: blur() blurs a background while keeping the overlay text sharp.

HTML:

<div class="backdrop-blur-demo">
  <div class="backdrop-blur-overlay">
    <strong>Backdrop Blur</strong>
    <p>The background is blurred, but this text remains sharp.</p>
  </div>
</div>

CSS:

.backdrop-blur-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 20px;
  background: repeating-linear-gradient(45deg, #0066cc 0 20px, #66ccff 20px 40px);
}
.backdrop-blur-overlay {
  width: 100%;
  max-width: 280px;
  padding: 20px;
  border: 1px solid rgb(255 255 255 / 60%);
  background-color: rgb(255 255 255 / 35%);
  backdrop-filter: blur(8px);
  color: #222;
  text-align: center;
}
.backdrop-blur-overlay p {
  margin: 10px 0 0;
}

Browser Result:

The striped background appears softened behind the translucent overlay, while the text remains readable.

This demonstrates the difference between blurring an element and blurring the area behind it.

Common Uses

The blur() function can be used in a variety of visual effects.

For example, a background image can be blurred without affecting the text above it by placing the image on a separate layer.

Blur should be used carefully on text and controls because excessive blur can reduce readability and accessibility.

Limitations

The blur() function has several important limitations.

• It accepts only one optional non-negative length value.
• Percentage values are invalid.
• Negative blur values are invalid.
• It changes visual rendering but does not change the element's layout dimensions.
• Blurred pixels may extend beyond the element's original visual boundaries.
• Large blur values can increase rendering costs.
• Applying filter to a container also blurs its rendered descendants.
• Blur is not a secure method for concealing sensitive information.

For example:

.example {
  filter: blur(5px);
}

This is valid.

However:

.example {
  filter: blur(50%);
}

This is invalid because blur() does not accept percentages.

Likewise:

.example {
  filter: blur(-3px);
}

This is invalid because the blur value cannot be negative.

To remove a blur effect, use blur(0) or filter: none when no other filters need to remain active.

Browser Support

The blur() function is Baseline Widely available and has been supported across major browser engines since September 2016.

It is widely supported when used with the filter property.

The backdrop-filter property has a separate browser compatibility history, so its support should be checked independently.

For a basic fallback, provide a normal appearance before applying the filter:

.example {
  filter: none;
  filter: blur(5px);
}

Browsers that do not support the blur declaration retain the earlier valid value.

You can also check support using @supports:

@supports (filter: blur(5px)) {
  .example {
    filter: blur(5px);
  }
}

For backdrop blur, check the appropriate property:

@supports (backdrop-filter: blur(8px)) {
  .overlay {
    backdrop-filter: blur(8px);
  }
}

For current compatibility information, visit Can I Use? and search for CSS Filters or backdrop-filter.

Specifications

The blur() function is defined in the Filter Effects Module Level 1 .

The specification defines blur() as a Gaussian blur filter function with an optional non-negative length parameter.

Related CSS features include the filter and backdrop-filter properties and other filter functions such as brightness(), contrast(), grayscale(), and drop-shadow().