CSS-Filter-Spielwiese
CSS Filter Playground
Stapelt Blur-, Helligkeits-, Sättigungs-, Farbton- und Drop-Shadow-Filter auf einem Beispiel und gibt das CSS aus.
Stapelt die CSS-Filterfunktionen auf ein Beispiel und gibt Ihnen die Deklaration. Die Vorschau wird von der `filter`-Eigenschaft des Browsers selbst gerendert, was Sie sehen, ist also per Definition, was das CSS tut, und keine Näherung davon. Das Extra hier ist die gleichwertige `feColorMatrix`: Jede dieser Funktionen außer blur und drop-shadow ist affin in RGBA, eine Kette von acht fällt also auf zwanzig Zahlen zusammen.
Vorschau
Gezeichnet von der filter-Eigenschaft des Browsers selbst, das hier ist also genau das, was das CSS unten tut — keine Annäherung daran.
CSS
Filter
So funktioniert es
Wählen Sie, was Sie ansehen
Flache Farbfelder zeigen, was mit bestimmten Farben passiert, der Verlauf zeigt, was über einen Bereich einschließlich der Grautöne passiert, und Ihr eigenes Bild zeigt, was mit dem passiert, was Sie tatsächlich filtern. Urteilen Sie nach dem Letzten, bevor Sie ausliefern.
Bewegen Sie die Funktionen, die Sie brauchen
Alles, was auf seinem neutralen Wert bleibt, wird ganz aus der Ausgabe weggelassen, das CSS bleibt also so kurz wie das, was Sie tatsächlich geändert haben. Die Reihenfolge zählt und folgt der Reihenfolge der Liste.
Fügen Sie drop-shadow zuletzt hinzu, wenn Sie einen wollen
Es ist ein eigener Block, weil es drei Zahlen und eine Farbe nimmt statt eines Betrags, und weil es dem Alphakanal folgt – es zeichnet die Form eines transparenten PNG nach und nicht seine Box.
Nehmen Sie das CSS, oder nehmen Sie die Matrix
Das CSS ist für ein Stylesheet. Die `feColorMatrix` ist für einen SVG-Filter, einen Shader oder jede Pipeline, in der es sich zu vermeiden lohnt, acht Durchgänge für das laufen zu lassen, was eine Matrixmultiplikation tut.
Häufige Fragen
Warum fehlt blur in der Matrix?
Weil es räumlich ist: Ein unscharfes Pixel hängt von seinen Nachbarn ab, und eine Farbmatrix sieht immer nur ein Pixel auf einmal. Dasselbe gilt für drop-shadow. Das Panel benennt, welche nicht zusammenfallen konnten, und lässt sie als getrennten Schritt stehen, statt sie stillschweigend zu verwerfen.
hue-rotate(180deg) hat mir nicht die Komplementärfarbe gegeben.
Das tut es nie. Die Funktion ist eine Drehung um die Leuchtdichteachse des nichtlinearen RGB-Würfels, die die Spezifikation mit einer festen Matrix definiert – sie ist keine wahrnehmungsbezogene Farbtondrehung und wurde nie als eine entworfen. Für ein tatsächliches Komplement drehen Sie den Farbton in OKLCH mit dem Farbkonverter oder dem Palettengenerator.
Verwendet grayscale(1) die richtigen Leuchtdichte-Koeffizienten?
Es verwendet die, die die Spezifikation vorschreibt: Rec. 709, angewendet auf gammakodierte Werte. Leuchtdichtegewichte auf nichtlineare Werte anzuwenden ist, streng genommen, falsch – eine ordentliche Entsättigung linearisiert zuerst. Die Spezifikation sagt, es so zu tun, und Browser tun es, dieses Werkzeug reproduziert also die Abweichung, statt sie zu korrigieren, weil die Übereinstimmung mit dem Browser der Sinn ist.
Deckt das backdrop-filter ab?
Die Funktionen sind dieselben, der Wert, den Sie kopieren, ist dort also ebenfalls gültig. Was anders ist, ist die Quelle – `backdrop-filter` filtert, was hinter dem Element gezeichnet ist, nicht das Element –, die Vorschau hier sagt Ihnen also nicht, wie ein Milchglas-Panel über Ihrem echten Inhalt aussieht. Fügen Sie es in die Seite ein und sehen Sie hin.
Eingabe aus
Box-Shadow-Generator
Box Shadow Generator
Setzt mehrschichtige Box- und Textschatten mit Live-Vorschau zusammen und gibt das CSS aus.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
CSS formatieren und minimieren
CSS Beautifier & Minifier
Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.
Helligkeit und Farbe anpassen
Brightness & Colour Adjust
Regelt Helligkeit, Kontrast, Sättigung, Farbtemperatur und Schärfe mit Live-Histogramm.
Box-Shadow-Generator
Box Shadow Generator
Setzt mehrschichtige Box- und Textschatten mit Live-Vorschau zusammen und gibt das CSS aus.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.