CSS Background Image Blur: Step-by-Step Guide

This guide shows you how to add a blur effect to a background image using CSS, a technique that softens a busy photo so text or other elements on top stand out clearly. You’ll learn three reliable methods—using the filter property on a pseudo-element, using backdrop-filter, and using an inline SVG filter—each with its own strengths. No JavaScript is required, and you only need a basic HTML file and a CSS file (or a <style> block).

What You’ll Need

A text editor (like VS Code, Notepad++, or Sublime Text)
A web browser (Chrome, Firefox, Safari, or Edge) for testing
An image file (JPG, PNG, or WebP) that you want to use as the background
Basic familiarity with HTML and CSS syntax

Step-by-Step

Method 1: Blur the Background Image with the `filter` Property (Most Common)

Create your HTML structure. Start with a <div> that will hold the background image and a separate element for the content on top. For example:
```
<div class="hero">
  <div class="content">
    <h1>Welcome</h1>
    <p>This text is readable.</p>
  </div>
</div>
```

Add the background image to the container. In your CSS, give the .hero class a background image and set its size and position:

.hero {
  background: url('your-image.jpg') center/cover no-repeat;
  position: relative; /* needed for the pseudo-element */
}

Create a pseudo-element for the blurred background. Because applying filter directly to the .hero would blur the content inside it too, you need a separate layer. Add a ::before pseudo-element that covers the entire container:

.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: inherit; /* inherits the background from .hero */
  filter: blur(5px); /* adjust the blur radius */
  z-index: -1; /* places it behind the content */
}

Make sure the content sits above the pseudo-element. Give the content a position: relative and a z-index higher than the pseudo-element (or simply let it be above because the pseudo-element has a negative z-index). For safety, add:
```
.content {
  position: relative;
  z-index: 1;
}
```
Adjust the blur radius. Change the blur(5px) value to your liking. A value between 2px and 10px usually works well. Test in your browser.

Method 2: Blur Only the Area Behind Content with `backdrop-filter`

Use a transparent background on the content area. Instead of blurring the whole background image, you can blur just the part behind a specific element. Apply backdrop-filter to the content container:

.content {
  background: rgba(255, 255, 255, 0.3); /* semi-transparent white */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* for Safari */
  padding: 20px;
  border-radius: 10px;
}

Place the content over the background image. Ensure the parent has the background image and the content is positioned on top (e.g., using flexbox or absolute positioning). This method blurs only the background behind the content, leaving the rest sharp.

Method 3: Blur with an Inline SVG Filter (For Edge Cases)

Define an SVG filter in your HTML. Add an inline SVG with a <filter> element that has a feGaussianBlur primitive:

<svg width="0" height="0">
  <filter id="blur-filter">
    <feGaussianBlur stdDeviation="5" />
  </filter>
</svg>

Apply the filter to the background element. In CSS, reference the SVG filter by its ID:

.hero {
  background: url('your-image.jpg') center/cover no-repeat;
  filter: url(#blur-filter);
}

Note the limitation. This method blurs the entire element including any content inside it, so use it only when you don’t have content on top or when you can place content outside the filtered element.

Common Mistakes

Applying filter directly to the container with content. This blurs the text and images inside as well. Always use a pseudo-element or backdrop-filter.
Forgetting to set position: relative on the parent. The pseudo-element uses absolute positioning; without a positioned ancestor, it will position relative to the nearest positioned element or the viewport, causing it to cover the wrong area.
Not setting z-index correctly. If the pseudo-element has a higher z-index than the content, it will cover the content and blur it. Use a negative z-index for the pseudo-element or a positive one for the content.
Using background: inherit without the background being on the parent. If the background is set on a child element, the pseudo-element won’t inherit it.
Forgetting the -webkit- prefix for backdrop-filter. Older Safari versions require it; without it, the effect won’t show in those browsers.

Tips

Use a moderate blur radius. Too much blur (e.g., 20px) can make the background unrecognizable; too little (1px) may not improve readability. Start with 5px and adjust.
Combine blur with a dark overlay. Adding a semi-transparent black overlay (e.g., background: rgba(0,0,0,0.4)) on the pseudo-element can further improve text contrast.
Test on multiple devices. The blur effect can look different on high-DPI screens; test on a phone and a desktop monitor.
Use backdrop-filter for a glassmorphism effect. It’s great for cards, navbars, or modals where you want the background to be blurred only behind the element.
Optimize your image. A large background image can slow down the blur rendering; compress the image or use a smaller version for the background.

Troubleshooting

The background image is not blurring at all. Check that the pseudo-element has content: "" and that it has a width and height. Also ensure the parent has position: relative and that the pseudo-element’s z-index is lower than the content.
The content is blurry too. You likely applied the filter to the parent directly. Move the filter to a pseudo-element or use backdrop-filter on the content.
The pseudo-element covers the content and hides it. Set z-index: -1 on the pseudo-element and ensure the content has a position: relative and a z-index: 1 (or just a higher z-index).
The blur is not working in Safari. For backdrop-filter, add the -webkit- prefix. For the pseudo-element method, Safari should support filter without a prefix, but if not, add -webkit-filter.
The background image is not showing at all. Check the file path in the url(). If the image is in the same folder as your CSS, use just the filename. If it’s in a subfolder, include the path (e.g., images/photo.jpg).
The blur is too heavy or too light. Adjust the pixel value in blur() or stdDeviation. For backdrop-filter, change the pixel value there.

Frequently Asked Questions

Can I blur only the background image without affecting the content?

Yes, use the pseudo-element method (Method 1) or backdrop-filter on the content. Both keep the content sharp.

What is the difference between `filter` and `backdrop-filter`?

filter blurs the element itself (including its children). backdrop-filter blurs whatever is behind the element, leaving the element’s own content unaffected.

Will the blur effect work on all browsers?

Modern browsers support both filter and backdrop-filter. For older browsers, you may need to provide a fallback, such as a solid background color, since the blur might not render.

How do I make the blur more or less intense?

Change the pixel value in blur() (e.g., blur(2px) for subtle, blur(10px) for strong). For SVG, adjust stdDeviation.

Can I use a CSS variable to control the blur radius?

Yes, you can define a CSS custom property like --blur: 5px; and use it in the filter: filter: blur(var(--blur));. This makes it easy to change globally.

Does blurring a background image affect performance?

Yes, blur is a GPU-intensive operation, especially on large images. To improve performance, use a smaller image, avoid animating the blur, and test on low-end devices.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →