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.

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. 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. 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.

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);
}

Then unblur on hover:

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

This makes content visible only on interaction.

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.

Learn More About the CSS Blur Function

Combining Multiple Filters

You can use blur() along with other filter functions like brightness() or grayscale():

img {
  filter: blur(3px) brightness(0.8);
}

This adds both a blur and dims the image for a moody effect.

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.

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.