Die CSS-Eigenschaft filter wendet visuelle Effekte auf ein Element an — Weichzeichnung, Helligkeit, Kontrast und Farbanpassungen, die auf Bilder, Hintergründe und sogar Videos wirken. Anders als Bildbearbeiter laufen Filter im Browser: Sie bleiben bei jeder Auflösung scharf und lassen sich mit Transitions sanft animieren.
Ziehe die Regler, um mehrere Filterfunktionen in einer Kette zu stapeln. Die Beispielszene aktualisiert sich in Echtzeit, und der generierte Code fasst alles in einer einzigen filter-Deklaration zusammen — bereit für dein Stylesheet.
Frequently Asked Questions
Q: Welche CSS-Filterfunktionen gibt es?
Welche CSS-Filterfunktionen gibt es? blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() und drop-shadow(). Beliebig viele lassen sich in einer filter-Eigenschaft verketten.
Q: Ist CSS-Filter GPU-beschleunigt?
Ist CSS-Filter GPU-beschleunigt? Ja. Die meisten Filterfunktionen laufen auf der GPU und animieren mit 60fps. blur() und drop-shadow() sind am schwersten — auf großen Elementen sparsam einsetzen.
Q: Beeinflusst filter das Layout?
Beeinflusst filter das Layout? Nein. Filter sind rein visuell — das Element behält Originalgröße und -position im Dokumentfluss. Für Größenänderungen nutze transform.
Q: Kann ich Filter animieren?
Kann ich Filter animieren? Ja. Animiere die filter-Eigenschaft mit transition oder keyframes. Die Interpolation zwischen verschiedenen Filterketten gleicher Länge läuft sanft.
Q: Wie mache ich ein Bild grau und bei Hover farbig?
Wie mache ich ein Bild grau und bei Hover farbig? Zwei Zustände: img { filter: grayscale(100%); transition: filter .4s; } und img:hover { filter: grayscale(0); }. Ein klassisches Portfolio-Muster.
Bauhaus-Farben
Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.
Bauhaus Rot #BE1E2DDas ikonische Rot der Bauhaus-Plakate und Drucksachen
Bauhaus Gelb #FFDE17Das leuchtende Gelb der Bauhaus-Ästhetik
Bauhaus Blau #00509EDas tiefe Blau des Bauhaus-Farbkreises
Ultramarin #120A8FHistorisches Pigment aus Lapislazuli, von Goethe beschrieben
Ocker #C78B2CErdpigment der deutschen Renaissance-Malerei
Petrol #006D7CDas Blaugrün der Nachkriegszeit und des Mid-Century-Designs
Lindgrün #7CBA3DDas frische Grün der Frühlingslinden
Ziegelrot #B22222Die roten Ziegeldächer der Altstädte
Graphit #38383ADer dunkle Grauton der Zeichenkunst und des Industriedesigns
Weiß #F4F4F4Das Weiß der Bauhaus-Wände — Raum und Licht
Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.