Tokenlabor

CSS-Filter-Generator

Der CSS-Filter-Generator wendet blur, Graustufen, Sepia, Kontrast, Sättigung und hue-rotate live auf ein Bild an und liefert den passenden filter- oder backdrop-filter-Code.

Vorschaubild für den Filter
CSS-Code

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

CSS-Filter im Überblick

Der CSS-Filter-Generator zeigt an einem Beispielbild oder an Ihrem eigenen Foto, was die Funktionen der Eigenschaft filter bewirken: filter: blur zeichnet weich, grayscale() erzeugt Graustufen, sepia() einen bräunlichen Vintage-Ton, brightness() und contrast() regeln Helligkeit und Kontrast, saturate() die Sättigung und hue-rotate dreht alle Farbtöne um einen Winkel auf dem Farbkreis. Ihr Bild wird nur lokal angezeigt und nicht hochgeladen.

Mehrere Filter stehen durch Leerzeichen getrennt hintereinander und werden in dieser Reihenfolge angewendet; der Generator gibt nur Funktionen aus, die vom Standardwert abweichen. drop-shadow() unterscheidet sich von box-shadow: Der Schatten folgt der sichtbaren Form, etwa bei PNG-Bildern mit Transparenz oder bei SVG-Symbolen. Mit backdrop-filter wirkt der Filter nicht auf das Element, sondern auf alles dahinter; so entsteht der bekannte Milchglas-Effekt mit blur().

Filter eignen sich für Hover-Effekte, abgedunkelte Hintergrundbilder hinter Text oder einheitliche Graustufen-Logos. Grenzen: Starke Unschärfe auf großen Flächen kostet Rechenleistung, besonders bei backdrop-filter auf schwächeren Mobilgeräten. Filter verändern nur die Darstellung; zum dauerhaften Bearbeiten speichern Sie das Bild in einem Bildprogramm neu.

Anleitung: CSS-Filter-Generator in 4 Schritten

  1. Eine Vorlage wie Graustufen, Sepia (Vintage) oder Weichzeichner wählen oder mit „kein Filter“ beginnen.
  2. Eigenschaft festlegen: filter für das Element selbst oder backdrop-filter für den Hintergrund dahinter; optional ein eigenes Bild wählen.
  3. Die Regler für blur, brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert und opacity einstellen, bei Bedarf drop-shadow mit Schatten x, y und Unschärfe.
  4. Den CSS-Code kopieren oder mit „Alle Filter zurücksetzen“ neu beginnen.

Typische Anwendungsfälle

  • Logo-Leiste gestalten: Partnerlogos in Graustufen zeigen und beim Überfahren mit der Maus farbig werden lassen.
  • Milchglas-Navigation bauen: Mit backdrop-filter und blur den Inhalt hinter einer festen Kopfzeile weichzeichnen.
  • Text auf Bildern lesbar machen: Ein Hintergrundbild mit brightness abdunkeln, statt es neu zu bearbeiten.
  • Freigestellte Bilder betonen: PNG-Grafiken mit drop-shadow einen Schatten entlang der Form geben.
Fragen

Häufige Fragen

Welche CSS-Filter gibt es?

blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate und sepia. Zusätzlich kann filter auf einen SVG-Filter per url() verweisen.

Wie mache ich ein Bild per CSS schwarz-weiß?

Mit filter: grayscale(100%). Mit einem Übergang auf grayscale(0) beim Überfahren mit der Maus entsteht ein beliebter Effekt für Logo-Leisten.

Was ist der Unterschied zwischen filter und backdrop-filter?

filter verändert das Element selbst mit seinem Inhalt. backdrop-filter verändert den Bereich hinter dem Element und braucht deshalb einen halbtransparenten Hintergrund, um sichtbar zu werden.

Spielt die Reihenfolge der Filter eine Rolle?

Ja. Die Funktionen werden nacheinander angewendet. sepia nach hue-rotate ergibt ein anderes Bild als hue-rotate nach sepia.

Wird mein Bild hochgeladen?

Nein. Das Bild wird nur als lokale Vorschau im Browser angezeigt und verlässt Ihr Gerät nicht.

Wie erzeuge ich einen Milchglas-Effekt mit CSS?

Mit backdrop-filter: blur(10px) auf einem Element mit halbtransparentem Hintergrund, etwa background: rgba(255, 255, 255, 0.5). Für ältere Safari-Versionen zusätzlich -webkit-backdrop-filter angeben.

Wie färbe ich ein Icon per CSS-Filter um?

Ein schwarzes Icon lässt sich mit einer Kette aus invert, sepia, saturate und hue-rotate auf viele Farben bringen; die Werte findet man durch Ausprobieren mit den Reglern. Bei SVG direkt im HTML ist fill mit currentColor einfacher und exakt.

Weitere Werkzeuge

Das könnte auch helfen

Alle 358 Werkzeuge

Farbumwandler

HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

Öffnen

Farbpalette aus Bild

Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

Öffnen

Kontrast prüfen (WCAG)

Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

Öffnen

CSS-Gradient-Generator

Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

Öffnen

Box-Shadow-Generator

CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

Öffnen

Flexbox-Generator

Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

Öffnen