CSS Blur(): Syntax, Usage, and Examples

The CSS blur() function creates a soft, hazy effect by applying a Gaussian blur to elements. You can use it to add visual depth, blur backgrounds for readability, or create stylish effects on images, text, and entire containers. Part of the CSS filter property, the blur function is easy to apply and extremely versatile in both static and animated designs.

This CSS property is essential for modern web design and front-end development, creating the perfect blur effect for various UI components when combined with HTML structure.

How to Use the CSS Blur Function

To apply a blur in CSS, you use the filter property with the blur() function:

selector {
  filter: blur(radius);
}

The radius defines how strong the blur is, in pixels (px). A larger number increases the level of blur.

Example:

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

This blurs the image by five pixels, creating a soft focus. The max-width ensures responsive behavior, while border-radius adds rounded corners to complement the soft blur effect. You can use any positive number, and fractional values like 1.5px are allowed for fine control.

When to Use Blur CSS

Use blur in CSS to enhance focus, create separation, or apply stylish effects. It works well in UIs, hero sections, galleries, and overlays. These filter effects are supported across modern browsers including Chrome, Firefox, and Safari. Common use cases include:

Creating Background Blur CSS Effects

Apply a blur to background elements while keeping foreground content clear:

.background {
  filter: blur(8px);
}

This draws attention to text or buttons in the foreground, making content more legible over busy imagery. The background-size, background-position, and background-repeat properties ensure the background image displays properly before applying the blur effect.

Softening Images or Thumbnails

Use blur to simulate depth of field or create image placeholders:

.preview img {
  filter: blur(2px);
}

This effect makes an image feel distant or unfinished, useful for loading states or hover reveals.

Adding CSS Text Blur for Mystery or Emphasis

You can blur text for artistic effect, content reveals, or security:

.secret-text {
  filter: blur(4px);
}

The font-weight and text-align properties help maintain readability structure even when the text is blurred.

Then unblur on hover:

.secret-text:hover {
  filter: blur(0);
}

This makes content visible only on interaction.

Working with Flexbox Layouts

When creating blurred card layouts, combine blur with flexbox properties:

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.blurred-card {
  filter: blur(3px);
  transition: filter 0.3s ease;
}

The justify-content and align-items properties center the blurred content within the container.

Examples of CSS Blur Function in Action

Blurred Image on Hover

img {
  transition: filter 0.3s;
}

img:hover {
  filter: blur(3px);
}

This adds a hover effect that softens the image.

Background Blur CSS With Overlay

<div class="blur-container">
  <div class="blur-background"></div>
  <div class="content">Readable content on top</div>
</div>

.blur-container {
  position: relative;
}

.blur-background {
  position: absolute;
  inset: 0;
  background: url('city.jpg') no-repeat center/cover;
  filter: blur(10px);
  z-index: 0;
}

.content {
  position: relative;
  z-index: 1;
  color: white;
}

This setup blurs the background image behind readable text.

Image Placeholder Effect

.low-quality-image {
  filter: blur(20px);
}

Use this on a low-res image while the high-res version loads, then swap them for a smooth transition.

Text Reveal with Blur

.blur-text {
  filter: blur(5px);
  cursor: pointer;
}

.blur-text:hover {
  filter: blur(0);
}

This makes text initially unreadable, then clear on hover—ideal for teasers or content reveals.

Creating Gradient Overlays with Blur

Combine blur with gradient backgrounds for modern design effects:

.gradient-blur {
  background: linear-gradient(45deg, rgba(255,0,150,0.8), rgba(0,204,255,0.8));
  filter: blur(6px);
  border-radius: 12px;
}

This creates a soft, colorful background using RGB color values within the gradient.

Learn More About the CSS Blur Function

Combining Multiple Filters

You can use blur() along with other filter functions like brightness(), saturate(), sepia(), invert(), or drop-shadow():

img {
  filter: blur(3px) brightness(0.8) saturate(1.2) sepia(0.3);
}

This adds blur, dims the image, increases saturation, and applies a sepia tone. The saturate(), sepia(), invert(), and drop-shadow() functions are part of the comprehensive filter effects available in CSS.

CSS Blur Background Techniques

When you want to blur only the background of an element and not its content, use a pseudo-element or backdrop filter:

.blur-box {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

This uses the backdrop-filter property to apply blur to whatever appears behind the element. It’s a go-to solution for frosted glass effects, especially in modals, headers, or mobile menus.

CSS Blur Text Styling Tips

If you want to use blur on text without affecting layout, apply the filter to the text container and avoid using opacity. Example:

.blur-label {
  filter: blur(1.5px);
}

Use carefully—blurred text can become unreadable fast, so it’s best for subtle emphasis or decorative purposes, not for long passages.

Performance Considerations

The blur() function can be GPU-intensive, especially when applied to large elements or backgrounds. To optimize performance:

• Use lower px values (like 1–5px) where possible.
• Avoid animating blur on full-screen sections.
• Limit usage in resource-heavy environments like mobile browsers.

CSS Filter Blur for Hover Transitions

Use blur in interactive transitions for a soft visual cue:

.card {
  transition: filter 0.4s ease;
}

.card:hover {
  filter: blur(2px);
}

This adds a polished effect on product cards or content tiles.

Image Blur With Pseudo-elements

To blur only part of an image, use pseudo-elements:

.img-blur {
  position: relative;
}

.img-blur::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 50%;
  bottom: 0;
  background: inherit;
  filter: blur(4px);
  z-index: 2;
}

This creates a partial blur overlay without duplicating the image.

Blur Transitions with Keyframes

You can animate blur with keyframes for visual storytelling:

@keyframes reveal {
  from {
    filter: blur(8px);
  }
  to {
    filter: blur(0);
  }
}

.title {
  animation: reveal 0.6s ease forwards;
}

Apply this on scroll-triggered elements for a dramatic entrance.

CSS Blur Background Alternatives

If backdrop-filter is unsupported, you can fake the effect by layering a duplicate element behind the content:

<div class="container">
  <img class="blurred-bg" src="photo.jpg">
  <div class="overlay-content">Text goes here</div>
</div>

.blurred-bg {
  filter: blur(8px);
  position: absolute;
  z-index: 0;
}

.overlay-content {
  position: relative;
  z-index: 1;
}

This ensures compatibility while delivering a similar visual effect.

Working with SVG and Blur Effects

Blur effects can also be applied to SVG elements for scalable graphics:

.svg-blur {
  filter: blur(2px);
}

SVG elements maintain their vector properties while gaining the soft blur effect, making them perfect for icons and illustrations.

Interactive Blur Control with JavaScript

For dynamic blur effects, use JavaScript to control the filter property:

<div id="blurElement">Content to blur</div>
<input type="range" id="blurSlider" min="0" max="20" value="0">

<script>
const element = document.getElementById('blurElement');
const slider = document.getElementById('blurSlider');

slider.addEventListener('input', function() {
  element.style.filter = `blur(${this.value}px)`;
});
</script>

This JavaScript solution allows users to adjust blur intensity in real-time.

Creating Reusable Blur Templates

Develop reusable template classes for consistent blur effects across your project:

.blur-light { filter: blur(2px); }
.blur-medium { filter: blur(5px); }
.blur-heavy { filter: blur(10px); }
.blur-subtle { filter: blur(0.5px); }

These template classes provide standardized blur levels for consistent design patterns.

The CSS blur function is a powerful and elegant way to soften elements, draw focus, or create modern UI effects. Whether you’re building background blur for readability, adding motion with animated transitions, or creating image blur placeholders, blur CSS opens up a variety of creative options.