CSS Filter: von Grayscale bis Sepia

Filter per CSS, Filter per SVG

Diese Art der Bildbearbeitung wird als nicht-destruktiv bezeichnet, weil sie das Original nicht verändern. Auch das kennen wir aus der Bildbearbeitung, z.B. bei Lightroom und Darktable.

Filter gibt es in drei Varianten: als CSS-Eigenschaft filter mit einfachen Werten wie grayscale und invert, die CSS-filter-Eigenschaft mit der URL eines SVG-Filters und zu guter Letzt SVG-Filter.

Meist stehen die Effektfilter im Rampenlicht, während filter:drop-shadow (Schlagschatten) eher als Dublette des box-shadow übersehen wird. Dabei bringt der drop-shadow Freiheit für die Freisteller.

Die Syntax für CSS-Filter ist denkbar einfach.

elem.fx { 
   filter: grayscale(100%);
}

elem.fx { 
   filter: hue-rotate(45deg) brightness(130%);
}

Mehrere Filter werden nacheinander ohne Komma – nur durch Leerzeichen voneinander getrennt – in Reihe geschaltet (»chaining«).

Filter für alle Elemente

CSS-Filter wirken auf alle Elemente, auf Bilder, Text und Dekorationen wie Hintergrundbilder und CSS border, nicht aber z.B. auf border-image.

<div class="framewrap">
	<figure>
		<img src="les-fleur.webp" width="200" …>
	</figure>
	<p>CSS-Filter wenden Effekte …</p>
</div>

CSS-Filter wenden Effekte ohne den Einsatz von Bildbearbeitung oder JavaScript direkt im Browser an und lassen sich animieren.

.framewrap {
	background: url(smart-bg.svg);
	filter: blur(10px) brightness(110%);
	transition: filter 4s;
	
	p {
		text-shadow: 3px 3px 4px #777
	}
	
	img {
		filter: drop-shadow(-20px 20px 10px gray);
	}
}

Während ein box-shadow immer rechteckig ist, wirft filter: drop-shadow einen ausgefeilten Schlagschatten unter ein freigestelltes (ausgeschnittenes) Bildmotiv.

CSS Filter auf Fotos

Das Spielzeug für CSS Filter sind die Filter auf Bildern.

Grayscale Emerald Negativ Sepia Cool Cyan Original

.efx { filter: none; }

Drop Shadow – Schlagschatten mit CSS filter

Da gibt es doch noch den soliden zuverlässigen box-shadow in CSS? Bei Freistellern – Bildern ohne Hintergrund – liegt der Schatten um die Box des Elements und erzeugt einen reckigen Kasten.

Mit filter:drop-shadow hingegen entsteht der Schatten unter dem freigestellten Motiv.

.dropshadow {
	filter:drop-shadow(-20px 20px 10px gray);
}
@media (min-width: 480px) {
	.dropshadow {
		filter:drop-shadow(-40px 40px 20px gray);
	}
}
… … … … … … … … … … … …
<picture class="dropshadow">
   <source media="(min-width: 480px)" srcset="fisch-980.webp">
   <source media="(min-width: 300px)" srcset="fisch-480.webp">
   <img loading="lazy" src="fisch-980.webp" alt="…" width="980" height="456">
</picture>

Auch wenn die Syntax von filter:drop-shadow fast dieselbe ist wie bei box-shadow und auch das Erscheinungsbild ähnlich wirken, gibt es einen Unterschied: CSS filter setzt hinter den Kulissen SVG-Filter ein.

Der drop-shadow unter den CSS-Filtern profitiert vom Dateiformat WebP, das freigestellte ausgeschnittene Motive deutlich sparsamer speichert als PNG.

Filtervariationen

none

Kein Filtereffekt

blur (px)

Weichzeichnen

brightness (%)

Helligkeit, heller mit Werten > 100%, dunkler mit Werten < 100%.

contrast (%)

Kontrast, höherer Kontrast mit Werten > 100%, weniger Kontrast mit Werten < 100%.

grayscale(%)

Graustufen

hue-rotate(deg)

Farbverschiebung

invert(%)

Umkehren, Negativ

opacity(%)

Deckkraft

saturate(%)

Sättigung

sepia(%)

Sepia-Effekt

url()

URL eines SVG-Filters

initial

Zurück zum voreingestellten Wert

drop-shadow(h-shadow v-shadow blur spread color)

h-shadow: Zahl der Pixel für die horizontale Distanz des Schlagschattens. Negative Werte: Schlagschatten nach links
v-shadow: vertikale Verschiebung, negative Werte: Schlagschatten nach oben
blur: Grad der Weichzeichnung
spread: Vergrößern des Schlagschattens durch Streuung, angegeben in Pixel, weglassen, weil der Filter sonst von vielen Browsern nicht unterstützt wird.
color: Farbe des Schlagschattens

CSS Filter via URL und SVG

Anstelle der reinen CSS-Filter wirken auch Filter mit der URL einer SVG-Datei, die aus einem SVG-Filter besteht. Die kreative Spannbreite von SVG-Filtern ist schlicht unendlich, genauso unendlich ist ihre Komplexität.

Warte warte nur ein Weilchen – in einigen Browsern, vor allem Safari, kann es ganz schön lang dauern, bis der Filter angezeigt wird.

.hitze {
  filter: url('#hitze');
}

<img class="hitze" src="versace.jpg" width="600" height="384" alt="Foto mit SVG-Filter">

<svg height="100%" width="100%" viewBox="0 0 690 477" >
<defs>
<filter id="hitze" style="color-interpolation-filters:sRGB">
   <feGaussianBlur stdDeviation="3" result="result5" in="SourceGraphic"></feGaussianBlur>
   <feTurbulence baseFrequency="0.02" seed="0" result="result1" numOctaves="3" type="fractalNoise"></feTurbulence>
   <feDisplacementMap scale="30" yChannelSelector="G" in2="result1" result="result3" xChannelSelector="R" in="SourceGraphic"></feDisplacementMap>
   <feComposite operator="out" result="result4" in2="result1" in="result3"></feComposite>
   <feComposite in2="result4" k3="0.3" k2="1" k1="0.3" result="result6" operator="arithmetic"></feComposite>
   <feComposite operator="over" in2="result5" in="result6"></feComposite>
</filter>
</defs>

Der SVG-Filter kann direkt im Quelltext der Seite untergebracht werden, etwa am Fuß der Seite. SVG Filter erzeugen kein sichtbares Element, sondern werden nur auf ein Element angewendet.

Die Verbindung zum HTML-Element, dem Bild, wird durch den Verweis url('#hitze') im CSS hergestellt.

Browser-Unterstützung

CSS Filter werden von allen modernen Browsern (Microsoft ab MS Edge) unterstützt. Alte Versionen von Internet Explorer (IE10 und auch IE11!) sprechen auf CSS-Filter nicht an.

Auch die Variante, den SVG-Filter inline ins HTML zu setzen und über die Referenz anzusprechen, wirkt nicht einmal in IE11.

Die zuverläßige Lösung sind SVG-Filter in einer SVG-Datei oder inline-SVG.

So gehts mit den alten IE-Grufties und dem immergrünen Browsern.

<svg viewBox="0 0 600 384" width="100%" height="100%">
   <filter id="hue" style="color-interpolation-filters:sRGB">
      <feColorMatrix values="180" type="hueRotate"/>
   </filter>
   <image xlink:href="versace.jpg" height="384" filter="url(#hue)" width="600" y="0" x="0"/>
</svg>

In ähnlicher Weise wie CSS filter lassen sich SVG-Filter in Serie schalten. Der erste Filter feColorMatrix erzeugt ein Graustufenbild, das dem zweiten Filter als Eingabe dient und zum Negativ konvertiert wird.

<svg viewBox="0 0 600 384" width="100%" height="100%">
   <filter id="invertgrayscale" style="color-interpolation-filters:sRGB" >
      <feColorMatrix values="0.8 0.4 -0.4 0 0 0.8 0.4 -0.4 0 0 0.8 0.4 -0.4 0 0 0 0 0 1 0 " result="grayscale"/>
      <feColorMatrix in="grayscale" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 "/>
   </filter>
   <image xlink:href="versace.jpg" height="384" filter="url(#invertgrayscale)" width="600" y="0" x="0"/>
</svg>

CSS filter in SVG-Filter übersetzt