How to Blur an Image in CSS

If you want to blur an image in CSS, the fastest answer is usually filter: blur(...). If you want a frosted-glass effect that blurs whatever sits behind an element, use backdrop-filter: blur(...) instead.

That sounds simple, but most real projects need more than a one-line answer. You may want to blur only the background behind text, add a soft hero image, create a glass card, or avoid the common mistake of blurring the text together with the image.

This guide walks through the most useful CSS blur techniques, when to use each one, and the pitfalls you should watch for in production work.

If you want a simpler, non-technical explanation first, read our guide to blur image meaning before jumping into the CSS implementation details.

Quick Answer

Use filter: blur() when you want to blur the element itself:

img {
  filter: blur(6px);
}

Use backdrop-filter: blur() when you want to blur the content behind an overlay:

.glass-card {
  backdrop-filter: blur(12px);
}

The difference matters:

• filter blurs the element and everything inside it.
• backdrop-filter blurs what is behind the element.

What blur() Does in CSS

The blur() function is part of the CSS filter property. It applies a Gaussian blur effect to the rendered pixels of an element.

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

The larger the blur radius, the softer the result:

• blur(2px) gives a subtle softening effect.
• blur(6px) is a typical UI blur for images.
• blur(16px) and above creates a much stronger haze.

In practice, px is the most common unit. If you are styling a hero image, a card background, or a hover effect, you will almost always reach for pixel values.

filter vs backdrop-filter

Here is the simplest way to choose the right blur method:

Use filter when:

• you want to blur an <img>
• you want a hover blur on a media card
• you want a decorative background layer to soften

Use backdrop-filter when:

• you want a frosted card over a photo
• you want text to remain crisp while the background behind it blurs
• you are building a glassmorphism-style UI

Example 1: Blur the Entire Image

This is the most direct CSS blur example. It blurs the image element itself.

<img
  class="blurred-photo"
  src="hero-photo.jpg"
  alt="Mountain landscape"
/>

.blurred-photo {
  width: 100%;
  max-width: 640px;
  display: block;
  filter: blur(6px);
}

Use this pattern when the image is decorative and does not need to stay sharp. It is also useful for loading states, anonymized previews, or transition effects.

When this works well

• blurred thumbnails
• soft decorative backgrounds
• hover or state-change effects

Where people go wrong

If you apply filter: blur() to a wrapper that contains text, buttons, or icons, all of that content gets blurred too. In that case, separate the blurred layer from the readable foreground content.

Example 2: Blur a Background Image Behind Text

This is one of the most common real-world needs: you want a hero section with readable text on top of a softened image.

The best approach is to blur a background layer, not the text container itself.

<section class="hero">
  <div class="hero__bg"></div>
  <div class="hero__content">
    <p class="eyebrow">CSS Tutorial</p>
    <h2>Build a softer hero with CSS blur</h2>
    <p>
      Keep the image atmospheric while making the heading easier to read.
    </p>
  </div>
</section>

.hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  min-height: 320px;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: -20px;
  background-image: url("hero-photo.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(14px);
  transform: scale(1.08);
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(14, 12, 10, 0.28);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: 48px;
  color: white;
}

Why this pattern works:

• the background image is blurred on its own layer
• the text remains sharp
• the slight scale helps hide hard blur edges
• the dark overlay improves readability

If you blur the entire section instead, the heading and body copy will soften too, which is usually not what you want.

Example 3: Create a Glassmorphism Card with backdrop-filter

backdrop-filter is the right tool when you want the classic frosted-glass effect.

<div class="glass-card">
  <h3>Project Overview</h3>
  <p>
    This panel blurs the content behind it while keeping the text inside sharp.
  </p>
</div>

.glass-card {
  width: min(420px, 100%);
  padding: 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

This technique works best when:

• the element has some transparency
• there is visual content behind it
• you want a floating panel, modal, navigation bar, or glass card

One important note: backdrop-filter does not magically blur a plain solid background. It needs visible content behind the overlay to produce the frosted effect people expect.

Example 4: Blur on Hover

Hover blur is useful for editorial cards, galleries, or preview states.

<a class="media-card" href="#">
  <img src="preview.jpg" alt="Preview cover" />
  <span>Read the case study</span>
</a>

.media-card {
  display: inline-grid;
  gap: 12px;
}

.media-card img {
  width: 320px;
  border-radius: 18px;
  transition: filter 180ms ease, transform 180ms ease;
}

.media-card:hover img {
  filter: blur(4px);
  transform: scale(1.02);
}

Keep the blur subtle here. Strong hover blur can feel jumpy and may make the interface harder to use.

Can CSS Blur Only Part of an Image?

Yes, but only in limited ways.

Pure CSS does not give you Photoshop-style freehand selection blur. What you can do is:

• place a second blurred layer over part of the image
• crop that layer with overflow: hidden
• use an absolutely positioned pseudo-element
• combine blur with masks, gradients, or transforms for controlled areas

Here is a simple partial blur pattern:

<div class="photo-frame">
  <img src="dashboard.jpg" alt="Analytics dashboard" />
  <div class="photo-frame__blur"></div>
</div>

.photo-frame {
  position: relative;
  width: 640px;
  overflow: hidden;
  border-radius: 20px;
}

.photo-frame img,
.photo-frame__blur {
  display: block;
  width: 100%;
}

.photo-frame__blur {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 38%;
  background-image: url("dashboard.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(10px);
  transform: scale(1.06);
}

This is more of a layout trick than a true selective blur tool, but it works for many UI use cases.

Common CSS Blur Mistakes

1. Blurring the text by accident

If the text sits inside the same blurred element, it will blur too. Separate the blurred layer from the foreground content.

2. Forgetting about blur edges

Blur often creates soft edges that get clipped. Expanding the blurred layer a bit and scaling it slightly can help hide edge artifacts.

3. Using backdrop-filter where filter is enough

If you only need to blur an image element, filter: blur() is simpler and usually easier to reason about.

4. Overusing large blur values

Very strong blur can muddy the design and increase rendering cost, especially on large elements or animated transitions.

5. Expecting backdrop-filter to work on opaque layers

If your card or overlay is fully opaque, the frosted effect will barely show. Some transparency is usually required.

Browser Support and Performance Notes

filter: blur() is broadly supported in modern browsers and is usually the safe default for direct image blur.

backdrop-filter is widely available in modern environments too, but you should still verify support for your audience and plan a graceful fallback for older or less capable browsers.

From a performance perspective:

• large blurred areas cost more than small ones
• animated blur costs more than static blur
• stacking multiple blurred layers can add up quickly

If performance matters, test on mid-range devices instead of assuming a desktop machine tells the whole story.

FAQ

How do you blur an image in CSS?

Use filter: blur(...) on the image element:

img {
  filter: blur(6px);
}

What is the difference between filter and backdrop-filter?

filter blurs the element itself. backdrop-filter blurs what is behind the element.

Can CSS blur only part of an image?

Partly. You can simulate partial blur with layered elements, cropping, and pseudo-elements, but CSS does not provide freehand selective blur.

Does CSS blur affect performance?

It can. Large blur radii, animated blur, and multiple blurred layers can increase rendering cost.

Should I use filter or backdrop-filter for hero sections?

If you want to soften the image itself, use filter. If you want a translucent overlay that blurs the scene behind it, use backdrop-filter.

Final Takeaway

For most use cases, the simplest answer is still the right one:

• blur the image itself with filter: blur(...)
• blur the background behind an overlay with backdrop-filter: blur(...)

If you design around that distinction, most CSS blur decisions become much easier. Start with the effect you actually want to blur, then choose the technique that matches it.

If you need to blur an image without writing CSS at all, you can go back to the Blur Image Online homepage for a browser-based tool and related editing guides.