jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS Filter Generator

Experimentieren Sie mit allen neun CSS-Filterfunktionen – blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia und opacity – mit einem visuellen Editor und Echtzeit-Vorschau. Jeder Filter hat ein Zahlenfeld, das bei seinem neutralen Standardwert beginnt, sodass das Ausgabe-CSS nur die Filter enthält, die Sie tatsächlich ändern.

Tool wird geladen...

Was ist CSS Filter Generator?

Der CSS Filter Generator ist ein visueller Spielplatz für die CSS filter-Property, die grafische Effekte wie Unschärfe, Farbverschiebung und Helligkeitsanpassungen auf jedes HTML-Element anwendet. Statt filter: blur(3px) grayscale(50%) manuell zu tippen, passen Sie Schieberegler an und sehen das Ergebnis sofort.

Kurze Antwort

Wenden Sie CSS-Filter (blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, opacity) auf ein Vorschau-Element oder ein hochgeladenes Bild an. Passen Sie jeden Filter mit Schiebereglern oder Zahlenfeldern an und sehen Sie das Ergebnis sofort. Kopieren Sie die CSS filter-Property bei Zufriedenheit.

Last updated: 2026-06-11

Einschränkungen

  • Die drop-shadow-Filterfunktion ist in diesem Generator nicht enthalten. Für Schatteneffekte verwenden Sie die separaten Werkzeuge auf dieser Seite.
  • Die Vorschau verwendet die CSS filter-Property, die auf das gesamte Element einschließlich seiner Kinder angewendet wird.
  • Die Bildvorschau erfordert eine öffentlich zugängliche HTTPS-URL.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Passen Sie die Filter-Schieberegler an – Blur, Brightness, Contrast, Grayscale, Hue-rotate, Invert, Saturate, Sepia und Opacity. Jeder beginnt bei seinem neutralen Wert.
  2. Beobachten Sie die Live-Vorschau, die sich in Echtzeit bei jeder Änderung aktualisiert. Die Vorschau zeigt den Filtereffekt auf einer bunten Verlaufs-Swatch.
  3. Fügen Sie optional eine öffentliche Bild-URL ein, um Filter auf einem echten Foto statt auf der Verlaufs-Swatch vorzupreisen.
  4. Kopieren Sie die CSS filter-Property aus dem Ausgabefeld. Nur nicht-standardmäßige Filterwerte erscheinen in der Ausgabe, was das CSS sauber hält.

Wofür du es nutzen kannst

  • Vorschau von CSS-Filterkombinationen auf einer Verlaufs-Swatch, bevor Sie sie auf den Hover-Effekt einer Website-Bildergalerie anwenden.
  • Testen von Filterwerten auf einem hochgeladenen Produktfoto, um die besten Einstellungen für eine Graustufen-zu-Farbe-Kartenanimation zu ermitteln.
  • Schnelles Generieren eines Sepia-Ton-Filter-CSS für eine Vintage-Fotogalerie-Sektion eines Blogs.

Anwendungsfalle

Praxisbeispiele

Beispiel

Teamfoto-Hover-Effekt

Ein Entwickler möchte einen Graustufen-zu-Farbe-Hover-Effekt für ein Teamfoto-Raster erstellen. Er öffnet den CSS Filter Generator, setzt Grayscale auf 100% für den Standardzustand und plant eine Hover-Regel mit Grayscale 0%.

Beispiel

Blog-Bildverbesserung

Ein Blogger fügt eine Unsplash-Bild-URL in den Generator ein und stellt Brightness auf 115%, Contrast auf 110% und Saturate auf 120%. Die subtile Anhebung macht das Bild lebendiger.

Haufige Fehler

  • Grayscale und saturate zusammen anwenden ohne die Reihenfolge zu verstehen – CSS-Filter werden in der Reihenfolge angewendet, in der sie im Property-Wert erscheinen.
  • Große Unschärfewerte auf vollbreiten Bildern verwenden – blur(20px) auf einem 1920px breiten Hero-Bild zwingt die GPU zur Berechnung eines großen Kernels.
  • Helligkeit auf 0% setzen und erwarten, sie wiederherstellen zu können – brightness(0%) macht ein Element komplett schwarz.

Überprüfung

  1. Setzen Sie Blur auf 3px und Grayscale auf 50%. Überprüfen Sie, ob die Vorschau einen unscharfen, entsättigten Effekt zeigt und die CSS-Ausgabe blur(3px) grayscale(50%) enthält.
  2. Fügen Sie eine gültige Bild-URL in das Bild-URL-Feld ein. Überprüfen Sie, ob das Bild in der Vorschau geladen wird und die Filter korrekt angewendet werden.

FAQ

Fragen zu CSS Filter Generator

Beeinträchtigen CSS-Filter die Seitenleistung?

CSS-Filter werden in modernen Browsern GPU-beschleunigt und laufen in der Regel gut. Allerdings kann die Kombination mehrerer Filter mit großen Unschärfewerten auf hochauflösenden Bildern zu Rendering-Verlangsamungen auf mobilen Geräten führen.

Kann ich CSS-Filter mit Transitions oder Keyframes animieren?

Ja, CSS-Filter sind animierbare Eigenschaften. Sie können transition: filter 0.3s ease für Hover-Effekte verwenden oder Filterwerte in @keyframes-Animationen einfügen.

Warum lädt mein Bild nicht in der Vorschau?

Die Bild-URL muss öffentlich zugänglich sein und Cross-Origin-Anfragen erlauben. Lokale Dateipfade funktionieren nicht, da Browser lokale Dateizugriffe aus Sicherheitsgründen blockieren.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren