CSS-Bildeffekte: Fotos wie aus Photoshop

CSS-Bildeffekte holen den Look aus der Bildbearbeitung direkt in den Browser, ganz ohne einen einzigen Klick in Photoshop. Ein Graustufen-Foto, ein Duotone, ein Milchglas-Panel: Alles entsteht aus wenigen Zeilen Code, der jederzeit umschaltbar bleibt. Wie weit die Technik seit den ersten Spielereien von 2016 gekommen ist, überrascht selbst erfahrene Frontend-Leute.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Fotos auf einer Website anzupassen bedeutet für viele noch den Umweg übers Grafikprogramm, dabei liefern CSS-Bildeffekte denselben Look direkt im Browser. Jede Farbkorrektur wird auf dem alten Weg zur eigenen Datei, jede Variante zu zusätzlichem Ballast im Projekt. CSS-Bildeffekte drehen dieses Verhältnis um und legen den kompletten Look in eine Textzeile, die der Browser live berechnet.

Das Wichtigste in Kürze

Die filter-Eigenschaft bringt zehn fertige Funktionen mit, von Graustufen über Weichzeichnen bis Schlagschatten, frei zu einer Kette kombinierbar.
Blend Modes über mix-blend-mode und background-blend-mode mischen Ebenen wie in einer Bildbearbeitung und erzeugen Duotone, Farb-Overlays und Texturen.
Mit backdrop-filter wirkt der Filter auf den Bereich hinter einem Element und liefert den Milchglas-Look moderner Oberflächen.
Alle CSS-Bildeffekte arbeiten nondestruktiv: Das Originalbild bleibt unangetastet, ein Zeichen Code schaltet den Look wieder ab.

Was können CSS-Bildeffekte heute?

Eine Hand hält eine orange Folie mit Text über einem halbseitig farbigen Landschaftsfoto — CSS-Filter verändern Fotos direkt im Browser durch filter, mix-blend-mode und backdrop-filter, ohne das Original zu verändern oder zusätzliche Dateien zu erstellen

CSS-Bildeffekte verändern Fotos direkt im Browser über die Eigenschaften filter, mix-blend-mode und backdrop-filter, ohne das Originalbild anzutasten oder eine zweite Datei zu erzeugen. Der Browser rechnet den Look bei jeder Anzeige neu, gesteuert allein durch das Stylesheet.

Genau diese Umkehrbarkeit trennt CSS-Bildeffekte von der klassischen Bildbearbeitung. Ein Sepia-Ton, der in Photoshop eine feste Pixeldatei wäre, bleibt in CSS eine Anweisung. Anpassen, überschreiben oder komplett entfernen kostet eine Zeile statt eines neuen Exports.

Als Bennett Feely 2016 sein Projekt Image-Effects veröffentlichte, war ein Set aus zwanzig CSS-Bildeffekten auf ein einziges Foto noch eine kleine Sensation. Wir haben die Sammlung damals selbst vorgestellt, als Fundstück für Bastler, die dem Grafikprogramm etwas Arbeit abnehmen wollten.

Seither hat die Sprache mächtig aufgeholt. Was 2016 noch Feature-Detection und Bauchschmerzen bei der Browserunterstützung bedeutete, gehört heute zum Standardrepertoire jeder aktuellen Engine. Dazu kamen Werkzeuge wie backdrop-filter und Farbfunktionen, die das Original damals gar nicht kannte, wie ein Blick auf den Stand von modernem CSS zeigt.

Drei Werkzeuge tragen die meisten CSS-Bildeffekte, jedes mit einem eigenen Wirkungsbereich:

Werkzeug	Wirkt auf	Typischer Einsatz
filter	das Element selbst	Graustufen, Weichzeichnen, Farbkorrektur
mix-blend-mode, background-blend-mode	Mischung mit der Ebene darunter	Duotone, Farb-Overlays, Texturen
backdrop-filter	den Bereich hinter dem Element	Milchglas, Glassmorphism, Overlays

Welche Filter bringt die filter-Eigenschaft mit?

Silbernes Pult mit 10 Drehreglern, deutsche Beschriftungen, rechter Regler unscharf — Zehn Regler, ein Werkzeug: Die filter-Eigenschaft bündelt zehn Funktionen, die sich frei zu einer Kette kombinieren lassen.

Die filter-Eigenschaft stellt zehn eingebaute Funktionen bereit: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate und sepia. Jede nimmt einen Wert entgegen und lässt sich mit den anderen zu einer Kette verbinden.

Ein einzelner Aufruf dieser Bildeffekte reicht für die häufigsten Aufgaben. Ein Graustufen-Bild etwa, das beim Überfahren mit der Maus in Farbe umschlägt, braucht nur zwei Regeln und eine weiche Überblendung:

CSS

Spannend wird die filter-Eigenschaft durch Verkettung. Mehrere Funktionen stehen hintereinander in einer Anweisung und wirken als Pipeline von links nach rechts. Die Reihenfolge verändert das Ergebnis, weil jede Funktion auf dem Zwischenstand der vorherigen arbeitet.

CSS

Die vollständige Referenz mit allen Wertebereichen führt MDN Web Docs für jede einzelne Funktion. Wichtig für die Praxis: Prozentwerte und Dezimalzahlen sind austauschbar, grayscale(50%) und grayscale(.5) meinen dasselbe.

Neben den nüchternen Korrekturen stecken auch auffällige Bildeffekte in der Liste. invert() kehrt alle Farben um und liefert ein Negativ, hue-rotate() dreht den Farbkreis um einen Gradwert und verschiebt die ganze Stimmung eines Fotos. Für einen Schatten, der der freigestellten Silhouette folgt statt dem rechteckigen Rahmen, sorgt drop-shadow(), der sich damit klar von box-shadow abhebt.

Die Reihenfolge in der Kette ist kein Detail. contrast() vor sepia() ergibt ein anderes Bild als sepia() vor contrast(), weil jede Funktion mit dem Ergebnis der vorherigen weiterrechnet. Ein kurzes Ausprobieren im Browser zeigt schneller als jede Theorie, welche Abfolge den gewünschten Look trifft.

grayscale()

Entzieht dem Bild die Farbe.

grayscale(1)

sepia()

Legt einen warmen Braunton auf.

sepia(.6)

saturate()

Regelt die Farbsättigung.

saturate(1.5)

brightness()

Regelt die Helligkeit.

brightness(1.1)

contrast()

Regelt den Kontrast.

contrast(1.2)

blur()

Zeichnet das Bild weich.

blur(4px)

hue-rotate()

Dreht den Farbton im Farbkreis.

hue-rotate(90deg)

invert()

Kehrt die Farben um, erzeugt ein Negativ.

invert(1)

opacity()

Regelt die Deckkraft.

opacity(.5)

drop-shadow()

Schatten entlang der Silhouette.

drop-shadow(2px 4px 6px)

Wie funktionieren Blend Modes in CSS?

Vier übereinanderliegende Glasscheiben in Orange, Blau, Grün und Grau auf weißem Hintergrund mit einem Zettel mit der Aufschrift „multiplizieren“ — Blend Modes mischen Ebenen wie übereinandergelegte Farbfolien und erzeugen in den Überlappungen neue Töne.

Blend Modes legen fest, wie sich die Farben zweier Ebenen mischen, gesteuert über mix-blend-mode für ein Element und background-blend-mode für mehrere Hintergründe desselben Elements. Beide teilen dieselben sechzehn Rechenarten, von multiply über screen bis luminosity.

Der Denkansatz stammt direkt aus der Ebenen-Logik klassischer Bildprogramme. multiply verdunkelt, screen hellt auf, overlay verstärkt den Kontrast. Wer schon einmal mit Ebenenmodi in Photoshop gearbeitet hat, findet dieselben Namen und dasselbe Verhalten wieder.

Ein Duotone-Effekt, der ein Foto auf zwei Farbtöne reduziert, entsteht aus einem Farbverlauf hinter dem Bild und einem passenden Blend Mode auf dem Bild selbst:

CSS

Für eine einfarbige Tönung genügt background-blend-mode auf einem Element, das ein Bild und eine Farbe zugleich als Hintergrund trägt. Der Browser mischt beide, ohne dass ein zusätzliches Overlay-Element im Markup nötig wird.

CSS

Die sechzehn Modi sortieren sich in nachvollziehbare Gruppen. Verdunkler wie multiply und darken drücken helle Töne weg, Aufheller wie screen und lighten arbeiten umgekehrt, Kontrastmodi wie overlay und soft-light verstärken die Mitten. Eine eigene Gruppe bilden hue, color und luminosity, die nur Farbton, Farbe oder Helligkeit einer Ebene übernehmen.

Ein praktischer Klassiker ist mix-blend-mode: difference für Text über einem wechselnden Hintergrund. Die Schrift invertiert sich gegen das, was gerade hinter ihr liegt, und bleibt dadurch lesbar, ob sie nun einen hellen oder einen dunklen Bildbereich kreuzt.

Verdunkeln

◆multiply
◆darken
◆color-burn

Helle Bereiche weichen der unteren Ebene.

Aufhellen

◆screen
◆lighten
◆color-dodge

Dunkle Bereiche weichen der unteren Ebene.

Kontrast

◆overlay
◆soft-light
◆hard-light

Verstärkt Licht und Schatten zugleich.

Farbkomponenten

◆hue
◆saturation
◆color
◆luminosity

Überträgt gezielt nur eine HSL-Komponente.

normal ist der Standard ohne Mischung. difference und exclusion kehren die Farben zweier Ebenen gegeneinander um.

Was macht backdrop-filter anders?

Oranger Ball mit der Zahl 1 hinter geriffeltem Glas, darunter der Text „ECHTE SICHT.“ — backdrop-filter wirkt wie eine Milchglasscheibe und verschwimmt alles, was hinter dem Element liegt.

backdrop-filter filtert nicht das Element selbst, sondern den Bereich dahinter. Ein halbtransparentes Panel mit blur() lässt den Hintergrund verschwimmen und erzeugt so den Milchglas-Effekt. Der Unterschied zu filter liegt allein in der Ebene, auf die der Bildeffekt greift.

Ein gutes Bild dafür ist eine Milchglasscheibe vor einem Fenster. filter wirkt wie ein Fotofilter auf dem Bild, backdrop-filter wie die geriffelte Scheibe davor. Dieser Look prägt heute Menüs, Modals und Benachrichtigungen quer durch moderne Oberflächen.

CSS

Zwei Details entscheiden über den Erfolg. Das Panel braucht einen halbtransparenten Hintergrund, sonst schimmert nichts durch. Safari kam erst 2024 ohne diesen Vorsatz nach, weshalb die zusätzliche Schreibweise mit -webkit- vor allem ältere Versionen absichert.

Seinen großen Auftritt hat backdrop-filter bei Overlays. Ein modales Fenster legt sich über die Seite, sein halbtransparenter Hintergrund lässt den Inhalt darunter verschwimmen und hält den Fokus auf dem Dialog. Auch das native dialog-Element und dessen ::backdrop lassen sich so mattieren, ganz ohne zusätzliches Markup.

CSS-Bildeffekte kombinieren und stapeln

Hand entfernt Klarsichtfolie mit Schriftzug nondestruktiv von einem Foto auf weißem Untergrund — Mehrere Effekt-Ebenen stapeln sich, ohne das Originalbild anzutasten, jede lässt sich einzeln herausziehen.

Der eigentliche Reiz der CSS-Bildeffekte entsteht, sobald filter, Blend Modes und Overlays übereinanderliegen. Diese Stapelung machte Bennett Feelys Sammlung damals aus, und sie bleibt der Kern anspruchsvoller Looks. Jede Ebene trägt einen Teil bei, keine überschreibt das Original.

Ein Farb-Overlay ohne zusätzliches Bild gelingt über ein Pseudo-Element, das sich per Blend Mode über das Foto legt und es einfärbt, während das darunterliegende Bild unberührt bleibt.

CSS

Richtig zur Geltung kommt die Technik, sobald mehrere Ebenen zusammenspielen. Ein Foto bekommt über filter eine gedämpfte Grundstimmung, ein Pseudo-Element legt per Blend Mode eine Farbe darüber, ein Titel darauf hebt sich durch seinen eigenen Mischmodus ab. Drei Schichten kommen ohne ein zusätzliches Bild aus, und jede davon lässt sich einzeln abschalten.

Weil alles im Stylesheet lebt, lassen sich diese Ebenen animieren. Ein Hover-Zustand blendet den Filter weich ein, ein sanftes Timing macht daraus eine Interaktion statt eines harten Umschaltens. Die Feinheiten der Übergänge behandelt Dr. Web ausführlich in einem eigenen Beitrag zu fertigen CSS-Übergängen.

Wie natürlich eine solche Bewegung wirkt, hängt an der Beschleunigungskurve. Eine lineare Blende fühlt sich mechanisch an, eine weiche Kurve organisch, wie der Vergleich verschiedener Easing-Funktionen zeigt.

Der eigentliche Gewinn liegt nicht im Effekt, sondern in der Umkehrbarkeit. Ein Graustufen-Look als eine CSS-Zeile kostet beim Redesign eine Minute, ein fest exportiertes Foto für jede Kachel kostet einen ganzen Nachmittag.
— Michael Dobler, Herausgeber Dr. Web

Welche Browser unterstützen CSS-Bildeffekte?

Schwarzes Kameraobjektiv mit einer Orangenscheibe vor der Frontlinse, auf weißem Grund — Filter, mix-blend-mode und background-blend-mode funktionieren präfixfrei in allen modernen Browsern. Safari unterstützt backdrop-filter erst seit 2024 ohne Präfix. Der Internet Explorer spielte keine Rolle

filter, mix-blend-mode und background-blend-mode laufen in allen aktuellen Browsern ohne Präfix; bei backdrop-filter zog Safari die vorsatzfreie Unterstützung erst 2024 nach. Der Internet Explorer kannte diese Effekte nie, spielt in der Praxis aber keine Rolle mehr.

Den tagesaktuellen Stand liefert caniuse.com für jede Eigenschaft getrennt. Für den Alltag heißt das: filter und Blend Modes gelten als sichere Bank, backdrop-filter als breit unterstützt, seit auch Safari nachgezogen hat.

Sauberer Umgang mit Randfällen läuft über Feature Detection. Eine @supports-Abfrage prüft, ob der Browser die Eigenschaft überhaupt kennt, und liefert nur dann den aufwendigen Look. Alle anderen sehen eine schlichtere, aber funktionierende Variante.

CSS

Der Ansatz trägt weiter als reine Ja-Nein-Abfragen. Ein Basis-Look aus filter, den jeder Browser beherrscht, bildet die Grundlage, darüber liefert eine @supports-Abfrage den aufwendigen backdrop-filter nur dort, wo er läuft. So sieht niemand eine kaputte Seite, sondern je nach Browser mehr oder weniger Politur.

Kosten Bildeffekte Performance und Barrierefreiheit?

Ein Malerpinsel mit bunten Würfelborsten und einer Waage für „SCHNELL“ und „LANGSAM“ — Browser beschleunigen CSS-Filter über die Grafikkarte, doch starke Weichzeichner und viele gefilterte Elemente gleichzeitig können zu Rucklern führen

Moderne Browser beschleunigen CSS-Filter über die Grafikkarte, doch starke Weichzeichner auf großen Flächen oder Dutzende gefilterte Elemente gleichzeitig können sichtbar ruckeln. CSS-Bildeffekte sind günstig, aber nicht gratis.

Zwei Mechanismen erklären die Last. Blend Modes und backdrop-filter erzeugen jeweils einen eigenen Compositing-Layer, den der Browser separat zusammenrechnen muss. Bei einer scrollenden Seite mit vielen solcher Ebenen summiert sich das zu spürbaren Rucklern.

Nicht jeder Filter wiegt gleich schwer. blur() mit großem Radius zählt zu den teuersten Operationen, weil der Browser für jedes Pixel die Umgebung einrechnet, während grayscale() oder sepia() kaum ins Gewicht fallen. Animierte Effekte kündigt man dem Browser mit will-change an, allerdings sparsam, weil jede Ankündigung selbst Speicher belegt.

Wichtiger als jeder Frame ist die Lesbarkeit. Text über einem gefilterten Foto verliert schnell an Kontrast, was Menschen mit Sehschwäche ausschließt. Hier gilt kein Kompromiss: Der Kontrast muss stimmen, notfalls weicht der Effekt.

Animierte Filter respektieren die Systemeinstellung prefers-reduced-motion. Nutzer, die Bewegung reduziert haben wollen, etwa wegen Schwindel, bekommen den statischen Zustand geliefert. Diese Rücksicht ist keine Kür, sondern Teil sauberer Frontend-Arbeit.

CSS

Wann sich CSS-Bildeffekte wirklich lohnen

Staffelei mit Smartphone (Display: CSS), blauem Pinsel und Schildchen (CSS-EFFEKTE) — CSS-Bildeffekte eignen sich für flexible, wiederverwendbare Effekte in Galerien und Themes, während komplexe Retusche Grafikprogrammen vorbehalten bleibt

CSS-Bildeffekte lohnen sich überall dort, wo ein Look flexibel, umschaltbar oder über viele Bilder einheitlich sein soll; für fest komponierte Montagen und komplexe Retusche bleibt das Grafikprogramm die richtige Wahl. Die Grenze verläuft entlang der Frage nach Wiederverwendbarkeit.

Für Hover-Zustände, Themes und Bildergalerien mit einheitlicher Tönung ist der Code-Weg klar überlegen. Ein einziges Stylesheet färbt hundert Fotos, und ein Dark-Mode-Umschalter dreht den Look mit einer Regel um. Kein Export käme da mit.

Ein Beispiel aus dem Alltag macht die Grenze greifbar. Eine Referenz-Galerie mit sechzig Kundenfotos in einheitlicher Tönung braucht genau eine CSS-Regel, die alle Bilder gemeinsam einfärbt und beim nächsten Rebranding in Sekunden umgestellt ist. Dieselbe Tönung als eingebrannte Bilddatei hieße sechzig neue Exporte bei jeder Farbänderung.

Umgekehrt gehört eine Bildmontage aus mehreren Fotos, Text und exakt platzierten Masken weiterhin in die Bildbearbeitung. Auch wenn das Motiv selbst als Suchergebnis zählen soll, ist die echte Bilddatei dem CSS-Effekt vorzuziehen.

Die ehrliche Einordnung lautet deshalb nicht CSS gegen Photoshop, sondern beide am richtigen Platz. Der Browser übernimmt das Umschaltbare und Wiederholbare, das Grafikprogramm das Einmalige und Feste. Diese Trennung im Kopf spart viel doppelte Arbeit.

Glossar: 16 wichtige Fachbegriffe zu CSS-Bildeffekten

Ein silbernes Kameraobjektiv mit Filterrad und einer Katze mit Teleskop im Zentrum — backdrop-filter ist eine CSS-Eigenschaft, die Filter auf den Bereich hinter einem Element anwendet und einen Milchglas-Effekt erzeugt

backdrop-filter

backdrop-filter ist die CSS-Eigenschaft, die einen Filter auf den Bereich hinter einem Element anwendet statt auf das Element selbst. Der Effekt erzeugt den Milchglas-Look, sobald das Element halbtransparent ist, und wird von Safari erst seit 2024 ohne den zusätzlichen -webkit-Vorsatz verstanden.

background-blend-mode

background-blend-mode steuert, wie sich mehrere Hintergründe eines Elements mischen, etwa ein Bild und eine Farbe. Der Modus arbeitet ohne zusätzliches Overlay-Element und eignet sich für einfarbige Tönungen direkt im Hintergrund.

blur()

blur() ist die Filterfunktion für Weichzeichnen. Der übergebene Pixelwert bestimmt die Stärke der Unschärfe. Große Werte auf großen Flächen zählen zu den rechenintensivsten Bildeffekten und sind mit Bedacht einzusetzen.

Compositing-Layer

Compositing-Layer nennt man eine separate Rendering-Ebene, die der Browser eigenständig berechnet und zusammenfügt. Blend Modes und backdrop-filter erzeugen solche Ebenen, was die Darstellung kostet und bei vielen Ebenen die Bildrate senken kann.

drop-shadow()

drop-shadow() ist die Filterfunktion für einen Schlagschatten, der der Silhouette eines Bildes folgt. Anders als box-shadow, das dem rechteckigen Rahmen folgt, respektiert drop-shadow transparente Bereiche eines PNG oder SVG.

Duotone

Duotone bezeichnet ein Foto, das auf zwei Farbtöne reduziert ist, meist eine dunkle und eine helle Farbe. In CSS entsteht dieser Bildeffekt aus einem Farbverlauf und einem Blend Mode und dient oft als markantes Gestaltungsmittel für Titelbilder.

Feature Detection

Feature Detection ist das Prüfen, ob ein Browser eine bestimmte Eigenschaft beherrscht, in CSS über die Regel @supports. Nur bei erkannter Unterstützung wird der aufwendige Bildeffekt geliefert, sonst greift eine schlichtere Alternative.

filter

filter ist die CSS-Eigenschaft für Bildeffekte auf einem Element selbst. Die Eigenschaft fasst zehn Funktionen von grayscale bis drop-shadow zusammen, die sich zu einer Kette verbinden lassen, deren Reihenfolge das Ergebnis beeinflusst.

Glassmorphism

Glassmorphism ist ein Designstil, der Oberflächen wie mattes Glas wirken lässt. Technisch beruht er auf backdrop-filter mit Weichzeichnen und einem halbtransparenten Hintergrund und prägt seit einigen Jahren Menüs und Dialoge moderner Oberflächen.

Graustufen (grayscale)

grayscale() ist die Filterfunktion, die einem Bild die Farbe entzieht. Der Wert reicht von 0 für das unveränderte Foto bis 1 für vollständige Graustufen und bildet die Basis vieler Hover-Effekte, die zwischen Grau und Farbe wechseln.

hue-rotate()

hue-rotate() dreht den Farbton eines Bildes um einen Gradwert im Farbkreis. Ein Wert von 180 Grad kippt warme in kalte Töne und umgekehrt und erlaubt Farbstimmungen, ohne das Ausgangsbild neu zu erstellen.

mix-blend-mode

mix-blend-mode legt fest, wie sich ein Element mit dem darunterliegenden Inhalt mischt. Die Eigenschaft überträgt die Ebenenmodi klassischer Bildprogramme ins Web und ist der Schlüssel zu Overlays, Duotone und Textureffekten.

nondestruktiv

nondestruktiv heißt, dass ein Effekt das Ausgangsmaterial nicht verändert. CSS-Bildeffekte sind grundsätzlich nondestruktiv, weil das Originalbild als Datei erhalten bleibt und der Look allein im Stylesheet existiert und sich jederzeit entfernen lässt.

Sättigung (saturate)

saturate() ist die Filterfunktion für die Farbsättigung. Werte über 1 verstärken die Farben, Werte unter 1 nehmen sie zurück. In Kombination mit Kontrast und Helligkeit entstehen daraus abgestimmte Bildstimmungen.

Stacking Context

Stacking Context ist der Kontext, der die Stapelreihenfolge von Elementen auf der Z-Achse bestimmt. Einige Bildeffekte erzeugen einen neuen Stacking Context, was das Zusammenspiel mit position und z-index beeinflussen kann.

Vendor-Präfix

Vendor-Präfix ist ein herstellerspezifischer Vorsatz wie -webkit-, der eine Eigenschaft in bestimmten Browsern aktiviert. Bei backdrop-filter sichert -webkit- die Darstellung in älteren Safari-Versionen ab, die den Effekt noch nicht ohne Vorsatz kannten.

FAQ: CSS-Bildeffekte: Fotos wie aus Photoshop

Analoge Kamera mit CSS-Code-Feld und einem kleinen grünen — CSS-Filter grayscale(1) wandelt Bilder in Schwarz-Weiß um. Der Wert 1 bedeutet vollständige Graustufen, 0 unverändert, Zwischenwerte ermöglichen teilweise Entsättigung

Wie macht man ein Bild mit CSS schwarz-weiß?

Ein einziger Filter genügt: img { filter: grayscale(1); } entzieht dem Bild die Farbe vollständig. Der Wert 1 steht für komplette Graustufen, 0 für das unveränderte Foto, Zwischenwerte wie 0.5 für eine teilweise Entsättigung. Das Originalbild bleibt dabei unangetastet.

Wie wechselt ein Bild beim Hover von Schwarz-Weiß auf Farbe?

Das Bild bekommt grayscale(1) als Grundzustand und grayscale(0) im :hover-Zustand, dazu eine transition auf die filter-Eigenschaft für den weichen Übergang. Beim Überfahren mit der Maus blendet das Foto so sanft von Grau in volle Farbe. Auf Touchgeräten sollte der Farbzustand zusätzlich ohne Hover erreichbar sein.

Brauche ich für CSS-Bildeffekte noch -webkit-Präfixe?

Für filter, mix-blend-mode und background-blend-mode sind in aktuellen Browsern keine Präfixe mehr nötig. Bei backdrop-filter kam Safaris vorsatzfreie Unterstützung erst 2024. Für ältere Safari-Versionen bleibt die zusätzliche Zeile -webkit-backdrop-filter als Absicherung sinnvoll.

Lassen sich CSS-Filter animieren?

Ja, die filter-Eigenschaft ist animierbar und reagiert auf transition und keyframes. Damit entstehen weiche Hover-Effekte oder pulsierende Unschärfen. Bei animierten Filtern empfiehlt sich eine Abfrage auf prefers-reduced-motion, damit Nutzer mit Bewegungsempfindlichkeit den statischen Zustand erhalten.

Wie lege ich mit CSS eine Farbfläche über ein Foto?

Ein Pseudo-Element wie ::after wird mit position: absolute und inset: 0 über das Bild gelegt, bekommt eine Hintergrundfarbe und einen mix-blend-mode wie multiply oder color. Der Browser mischt die Farbe direkt mit dem Foto, ohne dass ein zweites Bild oder ein zusätzliches Markup nötig wird.

Ersetzen CSS-Bildeffekte ein Grafikprogramm wie Photoshop?

Für umschaltbare, wiederholbare oder animierte Looks sind CSS-Bildeffekte oft die bessere Wahl, weil sie ohne Export auskommen und nondestruktiv bleiben. Fest komponierte Montagen, feine Retusche oder Bilder, die als eigenständiges Suchergebnis zählen sollen, gehören weiterhin in ein Grafikprogramm.