Runnable CSS Docs: Blur and Filter

Q: How do I blur an element in CSS?

Use filter: blur(5px);. The length is the blur radius: 0 is sharp and larger values are blurrier. It blurs the element and everything inside it, including its text and images.

Q: How do I blur the background behind an element?

Use backdrop-filter: blur(10px); on the element, with a partly transparent background such as rgb(255 255 255 / 0.5). The element's own content stays sharp and whatever is behind it is blurred, the frosted glass effect.

Q: What is the difference between drop-shadow() and box-shadow?

box-shadow always follows the element's rectangular box. filter: drop-shadow() follows the visible shape, including transparent areas of a PNG or SVG, so an icon's shadow has the icon's outline.

Q: How do I make an image black and white in CSS?

Use filter: grayscale(100%); (or grayscale(1)). Add a transition and filter: grayscale(0) on hover to bring the color back.

Q: Can I use several filters at once?

Yes, list them separated by spaces: filter: grayscale(1) brightness(1.2) blur(1px);. They are applied in order, so the order can change the result. A second filter declaration replaces the first.

Blur an element

filter: blur() takes a length, the blur radius. The larger it is, the blurrier the element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS blur</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; }
    img { display: block; width: 160px; height: 100px; }
    .b2 { filter: blur(2px); }
    .b6 { filter: blur(6px); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun"><figcaption>no filter</figcaption></figure>
    <figure><img class="b2" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, slightly blurred"><figcaption>blur(2px)</figcaption></figure>
    <figure><img class="b6" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, very blurred"><figcaption>blur(6px)</figcaption></figure>
  </div>
</body>
</html>

filter works on any element, not only images: a blurred div blurs its text, border and children too. Notice the soft edges on the blurred images: the blur spreads the picture outward and mixes in the transparent area around it. The fix is below, under "The blurry edge problem".

Blur the background: backdrop-filter

To blur what is behind an element (a frosted glass panel over a photo or a page), use backdrop-filter. The element's own content stays sharp. It needs a see-through background to show the blur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>backdrop-filter</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .scene {
      position: relative;
      height: 200px;
      background:
        radial-gradient(circle at 25% 40%, #f59e0b 0 40px, transparent 41px),
        radial-gradient(circle at 70% 60%, #16a34a 0 55px, transparent 56px),
        repeating-linear-gradient(90deg, #2563eb 0 16px, #93c5fd 16px 32px);
    }
    .glass {
      position: absolute;
      inset: 40px 60px;
      display: grid;
      place-items: center;
      background: rgb(255 255 255 / 0.35);
      -webkit-backdrop-filter: blur(12px); /* older Safari */
      backdrop-filter: blur(12px);
      border: 1px solid rgb(255 255 255 / 0.6);
      border-radius: 12px;
      color: #111827;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="scene"><div class="glass">Sharp text on frosted glass</div></div>
</body>
</html>

The stripes and circles are sharp around the panel and blurred behind it, while the panel's text is untouched. Keep the text readable: a lighter or darker tint in the background color helps on busy images.

Every filter function, live

Move any slider. The line under the image is the exact filter value, ready to copy:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 18px; }
    .controls input { vertical-align: middle; }
    #img { display: block; width: 220px; height: 138px; margin: 12px 0 8px; }
    code { display: block; background: #f3f4f6; padding: 6px; }
  </style>
</head>
<body>
  <div class="controls" id="controls"></div>
  <img id="img" alt="Hills and a sun" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E">
  <code id="out"></code>
  <script>
    // name, min, max, step, default (the value that changes nothing), unit
    const fns = [
      ['blur', 0, 10, 0.5, 0, 'px'], ['brightness', 0, 2, 0.05, 1, ''],
      ['contrast', 0, 2, 0.05, 1, ''], ['grayscale', 0, 1, 0.05, 0, ''],
      ['sepia', 0, 1, 0.05, 0, ''], ['saturate', 0, 3, 0.1, 1, ''],
      ['hue-rotate', 0, 360, 5, 0, 'deg'], ['invert', 0, 1, 0.05, 0, '']
    ];
    const controls = document.getElementById('controls');
    fns.forEach(([name, min, max, step, def]) => {
      controls.insertAdjacentHTML('beforeend', '<label>' + name + ' <input type="range" data-name="' + name + '" min="' + min + '" max="' + max + '" step="' + step + '" value="' + def + '"></label>');
    });
    const update = () => {
      const parts = fns.filter(([name, , , , def]) => Number(controls.querySelector('[data-name="' + name + '"]').value) !== def)
        .map(([name, , , , , unit]) => name + '(' + controls.querySelector('[data-name="' + name + '"]').value + unit + ')');
      const value = parts.join(' ') || 'none';
      document.getElementById('img').style.filter = value;
      document.getElementById('out').textContent = 'filter: ' + value + ';';
    };
    controls.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Only functions you moved away from their neutral value are written out, which keeps the value short. brightness(1) or blur(0px) change nothing, so there is no reason to list them.

Filter functions

Function	Neutral value	What it does	Example
`blur(r)`	`0`	Gaussian blur with radius r	`blur(4px)`
`brightness(n)`	`1`	darker below 1, brighter above	`brightness(0.7)`
`contrast(n)`	`1`	flatter below 1, punchier above	`contrast(1.3)`
`grayscale(n)`	`0`	1 (or 100%) is fully gray	`grayscale(100%)`
`sepia(n)`	`0`	warm brown tone	`sepia(0.6)`
`saturate(n)`	`1`	0 is gray, above 1 more vivid	`saturate(1.5)`
`hue-rotate(a)`	`0deg`	shifts every hue around the color wheel	`hue-rotate(90deg)`
`invert(n)`	`0`	1 is a full color negative	`invert(1)`
`opacity(n)`	`1`	like the `opacity` property	`opacity(0.5)`
`drop-shadow(x y blur color)`		a shadow that follows the shape	`drop-shadow(2px 4px 6px rgb(0 0 0 / 0.3))`

Numbers can also be percentages (grayscale(100%) equals grayscale(1)). Several functions go in one value, separated by spaces, and are applied in order: filter: grayscale(1) sepia(1) gives a brown tint, while sepia(1) grayscale(1) ends up plain gray.

drop-shadow follows the shape

box-shadow is always a rectangle (with rounded corners at most). drop-shadow() is drawn from the visible pixels, so a transparent icon gets a shadow with the icon's outline:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>drop-shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 10px 20px; }
    img { width: 90px; height: 90px; display: block; }
    .box-shadow { box-shadow: 6px 6px 8px rgb(0 0 0 / 0.4); }
    .drop-shadow { filter: drop-shadow(6px 6px 4px rgb(0 0 0 / 0.4)); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img class="box-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>box-shadow</figcaption></figure>
    <figure><img class="drop-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>drop-shadow()</figcaption></figure>
  </div>
</body>
</html>

The first star casts a square shadow from its invisible bounding box. The second casts a star-shaped one. Unlike box-shadow, drop-shadow() has no spread value and no inset; the box-shadow page covers those.

The blurry edge problem

A blurred image fades out at its edges, because the blur pulls in the transparent pixels around it. To keep a hard edge (for a blurred hero background, for example), put the image in a container with overflow: hidden and scale the image up slightly so the soft edge is cut off:

.hero { overflow: hidden; }
.hero img { filter: blur(8px); transform: scale(1.1); }

Hover effects with filter

filter can be transitioned, so a gray-to-color logo wall or a dim-until-hovered card is two rules:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter on hover</title>
  <style>
    .logo {
      width: 120px;
      height: 70px;
      display: inline-block;
      background: linear-gradient(135deg, #2563eb, #16a34a);
      border-radius: 8px;
      filter: grayscale(1) opacity(0.6);
      transition: filter 0.3s ease;
    }
    .logo:hover, .logo:focus-visible { filter: none; }
  </style>
</head>
<body>
  <a class="logo" href="#" aria-label="Partner one"></a>
  <a class="logo" href="#" aria-label="Partner two"></a>
</body>
</html>

Hover (or tab to) a tile and its color fades in.

Good to know

Performance. Large blur radii on large areas cost the most, especially backdrop-filter on elements that move or scroll. Test on a phone.
Readability. Never blur text people need to read, and check contrast on text over a frosted panel.
Stacking. Any filter other than none creates a new stacking context and becomes the containing block for position: fixed descendants, like transform.

Common mistakes

filter: blur(5). The radius needs a unit: blur(5px).
Using filter: blur() for a frosted panel. It blurs the panel's own text. Use backdrop-filter with a transparent background.
A backdrop-filter that shows nothing. The background of the element must be at least partly transparent, and there must be something behind it.
Two filter declarations. The second replaces the first. Put all functions in one value.
Box-shaped shadows on transparent icons. Use filter: drop-shadow() instead of box-shadow.

Frequently Asked Questions

How do I blur an element in CSS?

Use filter: blur(5px);. The length is the blur radius: 0 is sharp and larger values are blurrier. It blurs the element and everything inside it, including its text and images.

How do I blur the background behind an element?

Use backdrop-filter: blur(10px); on the element, with a partly transparent background such as rgb(255 255 255 / 0.5). The element's own content stays sharp and whatever is behind it is blurred, the frosted glass effect.

What is the difference between drop-shadow() and box-shadow?

box-shadow always follows the element's rectangular box. filter: drop-shadow() follows the visible shape, including transparent areas of a PNG or SVG, so an icon's shadow has the icon's outline.

How do I make an image black and white in CSS?

Use filter: grayscale(100%); (or grayscale(1)). Add a transition and filter: grayscale(0) on hover to bring the color back.

Can I use several filters at once?

Yes, list them separated by spaces: filter: grayscale(1) brightness(1.2) blur(1px);. They are applied in order, so the order can change the result. A second filter declaration replaces the first.

Related concepts