Ausführbare CSS-Docs: CSS Blur und Filter

Q: Wie zeichne ich ein Element in CSS weich?

Nimm filter: blur(5px);. Die Länge ist der Radius der Unschärfe: 0 ist scharf, größere Werte sind unschärfer. Es zeichnet das Element und alles darin weich, auch Text und Bilder.

Q: Wie zeichne ich den Hintergrund hinter einem Element weich?

Nimm backdrop-filter: blur(10px); am Element, mit einem teilweise transparenten Hintergrund wie rgb(255 255 255 / 0.5). Der eigene Inhalt des Elements bleibt scharf, und alles dahinter wird weichgezeichnet: der Milchglas-Effekt.

Q: Was ist der Unterschied zwischen drop-shadow() und box-shadow?

box-shadow folgt immer der rechteckigen Box des Elements. filter: drop-shadow() folgt der sichtbaren Form, einschließlich transparenter Bereiche eines PNG oder SVG, also hat der Schatten eines Icons den Umriss des Icons.

Q: Wie mache ich ein Bild in CSS schwarzweiß?

Nimm filter: grayscale(100%); (oder grayscale(1)). Mit einer Transition und filter: grayscale(0) beim Hovern kommt die Farbe zurück.

Q: Kann ich mehrere Filter gleichzeitig verwenden?

Ja, liste sie getrennt durch Leerzeichen auf: filter: grayscale(1) brightness(1.2) blur(1px);. Sie werden der Reihe nach angewendet, also kann die Reihenfolge das Ergebnis ändern. Eine zweite filter-Deklaration ersetzt die erste.

Ein Element weichzeichnen

filter: blur() nimmt eine Länge, den Radius der Unschärfe. Je größer er ist, desto unschärfer wird das 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 funktioniert an jedem Element, nicht nur an Bildern: Ein weichgezeichnetes div zeichnet auch seinen Text, Rahmen und seine Kinder weich. Achte auf die weichen Ränder der weichgezeichneten Bilder: Die Unschärfe verteilt das Bild nach außen und mischt den transparenten Bereich drumherum hinein. Die Lösung steht unten unter „Das Problem mit unscharfen Rändern“.

Den Hintergrund weichzeichnen: backdrop-filter

Um weichzuzeichnen, was hinter einem Element liegt (ein Milchglas-Panel über einem Foto oder einer Seite), nimm backdrop-filter. Der eigene Inhalt des Elements bleibt scharf. Es braucht einen durchsichtigen Hintergrund, damit die Unschärfe sichtbar wird:

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

Die Streifen und Kreise sind um das Panel herum scharf und dahinter unscharf, während der Text des Panels unberührt bleibt. Halte den Text lesbar: Ein hellerer oder dunklerer Farbton in der Hintergrundfarbe hilft bei unruhigen Bildern.

Jede Filterfunktion live

Bewege einen beliebigen Schieberegler. Die Zeile unter dem Bild ist der exakte filter-Wert, bereit zum Kopieren:

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

Nur Funktionen, die du von ihrem neutralen Wert wegbewegt hast, werden ausgeschrieben, damit der Wert kurz bleibt. brightness(1) oder blur(0px) ändern nichts, also gibt es keinen Grund, sie aufzulisten.

Filterfunktionen

Funktion	Neutraler Wert	Was sie macht	Beispiel
`blur(r)`	`0`	Gaußsche Unschärfe mit Radius r	`blur(4px)`
`brightness(n)`	`1`	dunkler unter 1, heller darüber	`brightness(0.7)`
`contrast(n)`	`1`	flacher unter 1, kräftiger darüber	`contrast(1.3)`
`grayscale(n)`	`0`	1 (oder 100%) ist vollständig grau	`grayscale(100%)`
`sepia(n)`	`0`	warmer Braunton	`sepia(0.6)`
`saturate(n)`	`1`	0 ist grau, über 1 kräftiger	`saturate(1.5)`
`hue-rotate(a)`	`0deg`	verschiebt jeden Farbton auf dem Farbkreis	`hue-rotate(90deg)`
`invert(n)`	`0`	1 ist ein vollständiges Farbnegativ	`invert(1)`
`opacity(n)`	`1`	wie die Eigenschaft `opacity`	`opacity(0.5)`
`drop-shadow(x y blur color)`		ein Schatten, der der Form folgt	`drop-shadow(2px 4px 6px rgb(0 0 0 / 0.3))`

Zahlen können auch Prozentwerte sein (grayscale(100%) ist gleich grayscale(1)). Mehrere Funktionen stehen in einem Wert, getrennt durch Leerzeichen, und werden der Reihe nach angewendet: filter: grayscale(1) sepia(1) ergibt einen Braunton, während sepia(1) grayscale(1) einfach grau endet.

drop-shadow folgt der Form

box-shadow ist immer ein Rechteck (höchstens mit abgerundeten Ecken). drop-shadow() wird aus den sichtbaren Pixeln gezeichnet, also bekommt ein transparentes Icon einen Schatten mit dem Umriss des Icons:

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

Der erste Stern wirft einen quadratischen Schatten aus seiner unsichtbaren Begrenzungsbox. Der zweite wirft einen sternförmigen. Anders als box-shadow hat drop-shadow() keinen spread-Wert und kein inset; die Seite zu box-shadow behandelt diese.

Das Problem mit unscharfen Rändern

Ein weichgezeichnetes Bild blendet an seinen Rändern aus, weil die Unschärfe die transparenten Pixel drumherum hineinzieht. Um eine harte Kante zu behalten (zum Beispiel für einen weichgezeichneten Hero-Hintergrund), setz das Bild in einen Container mit overflow: hidden und vergrößere das Bild leicht, damit der weiche Rand abgeschnitten wird:

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

Hover-Effekte mit filter

filter lässt sich per Transition animieren, also sind eine Logowand, die von Grau zu Farbe wechselt, oder eine Karte, die bis zum Hovern abgedunkelt ist, zwei Regeln:

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

Fahr über eine Kachel (oder spring per Tab hin), und ihre Farbe blendet sich ein.

Gut zu wissen

Performance. Große Unschärferadien auf großen Flächen kosten am meisten, besonders backdrop-filter an Elementen, die sich bewegen oder scrollen. Teste auf einem Handy.
Lesbarkeit. Zeichne nie Text weich, den Menschen lesen müssen, und prüf den Kontrast von Text auf einem Milchglas-Panel.
Stapeln. Jeder filter außer none erzeugt einen neuen Stacking Context und wird zum umgebenden Block für Nachfahren mit position: fixed, so wie transform.

Häufige Fehler

filter: blur(5). Der Radius braucht eine Einheit: blur(5px).
filter: blur() für ein Milchglas-Panel nutzen. Es zeichnet den eigenen Text des Panels weich. Nimm backdrop-filter mit transparentem Hintergrund.
Ein backdrop-filter, das nichts zeigt. Der Hintergrund des Elements muss zumindest teilweise transparent sein, und dahinter muss etwas liegen.
Zwei filter-Deklarationen. Die zweite ersetzt die erste. Setz alle Funktionen in einen Wert.
Kastenförmige Schatten an transparenten Icons. Nimm filter: drop-shadow() statt box-shadow.

Häufig gestellte Fragen

Wie zeichne ich ein Element in CSS weich?

Nimm filter: blur(5px);. Die Länge ist der Radius der Unschärfe: 0 ist scharf, größere Werte sind unschärfer. Es zeichnet das Element und alles darin weich, auch Text und Bilder.

Wie zeichne ich den Hintergrund hinter einem Element weich?

Nimm backdrop-filter: blur(10px); am Element, mit einem teilweise transparenten Hintergrund wie rgb(255 255 255 / 0.5). Der eigene Inhalt des Elements bleibt scharf, und alles dahinter wird weichgezeichnet: der Milchglas-Effekt.

Was ist der Unterschied zwischen drop-shadow() und box-shadow?

box-shadow folgt immer der rechteckigen Box des Elements. filter: drop-shadow() folgt der sichtbaren Form, einschließlich transparenter Bereiche eines PNG oder SVG, also hat der Schatten eines Icons den Umriss des Icons.

Wie mache ich ein Bild in CSS schwarzweiß?

Nimm filter: grayscale(100%); (oder grayscale(1)). Mit einer Transition und filter: grayscale(0) beim Hovern kommt die Farbe zurück.

Kann ich mehrere Filter gleichzeitig verwenden?

Ja, liste sie getrennt durch Leerzeichen auf: filter: grayscale(1) brightness(1.2) blur(1px);. Sie werden der Reihe nach angewendet, also kann die Reihenfolge das Ergebnis ändern. Eine zweite filter-Deklaration ersetzt die erste.

Verwandte Konzepte