Effekte wie Weichzeichner,
Helligkeit oder Kontrast mit CSS
auf Elemente anwenden.

blur

CSS Filter

WertBedeutung
blur(px),Weichzeichner mit Stärke in einer beliebigen CSS Längeneinheit wie z.B. PX, CM, VMAX oder REM. Der Wert 0 ist die normale Darstellung. Die Vererbung von BLUR kann je nach Browser unterschiedlich statt finden. BLUR zeichnet in der Regel alle Kind-Elemente weich aber nicht immer. Es ist mitunter empfehlenswert das Element mit der Eigenschaft BLUR in einen zusätzlichen Container (Wrap) zu packen, damit die Rahmenkonturen scharf bleiben.
brightness(%),Helligkeit des Element. 0 ist völlig schwarz. 1 ist normal. 2 ist doppelt so hell. Die Helligkeit wird linear berechnet.
contrast(%);Kontrast des Elements. 0 ist ohne jeglichen Kontrast. 1 ist normal und 2 ist doppelter Kontrast.
drop-shadow( ... );Schlagschatten des Elements. Verhält sich auf den ersten Blick ähnlich wie Boxshadow. Allerdings werden Pfade und Alphakanäle erkannt. Es wird mit 3 Längenwerten (X,Y,Weichzeichner) und 1 Farbwert definiert.
grayscale(%);Endsättigung des Elements. 0 Ist normale Wiedergabe. 1 ist Graustufenversion.
hue-rotate(deg);Farbton-Rotation mit Gradangabe. Farbton wird entsprechend im Farbkreis verschoben.
invert(%);Negative Umkehrung der Farben des Elements. 0 Ist die normale Wiedergabe. 0.5 erzeugt eine graue Fläche und 1 ist negative Farbwiedergabe.
opacity(%);Deckkraft des Element. Verhält sich wie die CSS Eigenschaft Opacity.
saturate(%);Farb-Sättigung des Elements. 1 ist normale Wiedergabe. 0 ist ein Graustufenbild. 2 ist doppelte Sättigung.
sepia(%);Sepia-Farbeffekt auf das Bild. 0 ist normale Wiedergabe. 1 ist vollständiger Sepia-Effekt.
sepia(%) saturate(%) blur(px);Es können beliebig viele Filter in Kombination hintereinander geschaltet werden. Dabei sollte die Performance des Wiedergabegerätes beachtet werden.
url();Es können SVG Filter über die Angabe der URL angewendet werden.
none;Filter wird deaktiviert.
initial;Standard-Ausgangswert.
inherit;Erbt den Effekt des Eltern-Elements.

blur#2

CSS Filter

WertBedeutung
blur(px),Weichzeichner mit Stärke in einer beliebigen CSS Längeneinheit wie z.B. PX, CM, VMAX oder REM. Der Wert 0 ist die normale Darstellung. Die Vererbung von BLUR kann je nach Browser unterschiedlich statt finden. BLUR zeichnet in der Regel alle Kind-Elemente weich aber nicht immer. Es ist mitunter empfehlenswert das Element mit der Eigenschaft BLUR in einen zusätzlichen Container (Wrap) zu packen, damit die Rahmenkonturen scharf bleiben.
brightness(%),Helligkeit des Element. 0 ist völlig schwarz. 1 ist normal. 2 ist doppelt so hell. Die Helligkeit wird linear berechnet.
contrast(%);Kontrast des Elements. 0 ist ohne jeglichen Kontrast. 1 ist normal und 2 ist doppelter Kontrast.
drop-shadow( ... );Schlagschatten des Elements. Verhält sich auf den ersten Blick ähnlich wie Boxshadow. Allerdings werden Pfade und Alphakanäle erkannt. Es wird mit 3 Längenwerten (X,Y,Weichzeichner) und 1 Farbwert definiert.
grayscale(%);Endsättigung des Elements. 0 Ist normale Wiedergabe. 1 ist Graustufenversion.
hue-rotate(deg);Farbton-Rotation mit Gradangabe. Farbton wird entsprechend im Farbkreis verschoben.
invert(%);Negative Umkehrung der Farben des Elements. 0 Ist die normale Wiedergabe. 0.5 erzeugt eine graue Fläche und 1 ist negative Farbwiedergabe.
opacity(%);Deckkraft des Element. Verhält sich wie die CSS Eigenschaft Opacity.
saturate(%);Farb-Sättigung des Elements. 1 ist normale Wiedergabe. 0 ist ein Graustufenbild. 2 ist doppelte Sättigung.
sepia(%);Sepia-Farbeffekt auf das Bild. 0 ist normale Wiedergabe. 1 ist vollständiger Sepia-Effekt.
sepia(%) saturate(%) blur(px);Es können beliebig viele Filter in Kombination hintereinander geschaltet werden. Dabei sollte die Performance des Wiedergabegerätes beachtet werden.
url();Es können SVG Filter über die Angabe der URL angewendet werden.
none;Filter wird deaktiviert.
initial;Standard-Ausgangswert.
inherit;Erbt den Effekt des Eltern-Elements.

brightness

CSS Filter

WertBedeutung
blur(px),Weichzeichner mit Stärke in einer beliebigen CSS Längeneinheit wie z.B. PX, CM, VMAX oder REM. Der Wert 0 ist die normale Darstellung. Die Vererbung von BLUR kann je nach Browser unterschiedlich statt finden. BLUR zeichnet in der Regel alle Kind-Elemente weich aber nicht immer. Es ist mitunter empfehlenswert das Element mit der Eigenschaft BLUR in einen zusätzlichen Container (Wrap) zu packen, damit die Rahmenkonturen scharf bleiben.
brightness(%),Helligkeit des Element. 0 ist völlig schwarz. 1 ist normal. 2 ist doppelt so hell. Die Helligkeit wird linear berechnet.
contrast(%);Kontrast des Elements. 0 ist ohne jeglichen Kontrast. 1 ist normal und 2 ist doppelter Kontrast.
drop-shadow( ... );Schlagschatten des Elements. Verhält sich auf den ersten Blick ähnlich wie Boxshadow. Allerdings werden Pfade und Alphakanäle erkannt. Es wird mit 3 Längenwerten (X,Y,Weichzeichner) und 1 Farbwert definiert.
grayscale(%);Endsättigung des Elements. 0 Ist normale Wiedergabe. 1 ist Graustufenversion.
hue-rotate(deg);Farbton-Rotation mit Gradangabe. Farbton wird entsprechend im Farbkreis verschoben.
invert(%);Negative Umkehrung der Farben des Elements. 0 Ist die normale Wiedergabe. 0.5 erzeugt eine graue Fläche und 1 ist negative Farbwiedergabe.
opacity(%);Deckkraft des Element. Verhält sich wie die CSS Eigenschaft Opacity.
saturate(%);Farb-Sättigung des Elements. 1 ist normale Wiedergabe. 0 ist ein Graustufenbild. 2 ist doppelte Sättigung.
sepia(%);Sepia-Farbeffekt auf das Bild. 0 ist normale Wiedergabe. 1 ist vollständiger Sepia-Effekt.
sepia(%) saturate(%) blur(px);Es können beliebig viele Filter in Kombination hintereinander geschaltet werden. Dabei sollte die Performance des Wiedergabegerätes beachtet werden.
url();Es können SVG Filter über die Angabe der URL angewendet werden.
none;Filter wird deaktiviert.
initial;Standard-Ausgangswert.
inherit;Erbt den Effekt des Eltern-Elements.

contrast

CSS Filter

WertBedeutung
blur(px),Weichzeichner mit Stärke in einer beliebigen CSS Längeneinheit wie z.B. PX, CM, VMAX oder REM. Der Wert 0 ist die normale Darstellung. Die Vererbung von BLUR kann je nach Browser unterschiedlich statt finden. BLUR zeichnet in der Regel alle Kind-Elemente weich aber nicht immer. Es ist mitunter empfehlenswert das Element mit der Eigenschaft BLUR in einen zusätzlichen Container (Wrap) zu packen, damit die Rahmenkonturen scharf bleiben.
brightness(%),Helligkeit des Element. 0 ist völlig schwarz. 1 ist normal. 2 ist doppelt so hell. Die Helligkeit wird linear berechnet.
contrast(%);Kontrast des Elements. 0 ist ohne jeglichen Kontrast. 1 ist normal und 2 ist doppelter Kontrast.
drop-shadow( ... );Schlagschatten des Elements. Verhält sich auf den ersten Blick ähnlich wie Boxshadow. Allerdings werden Pfade und Alphakanäle erkannt. Es wird mit 3 Längenwerten (X,Y,Weichzeichner) und 1 Farbwert definiert.
grayscale(%);Endsättigung des Elements. 0 Ist normale Wiedergabe. 1 ist Graustufenversion.
hue-rotate(deg);Farbton-Rotation mit Gradangabe. Farbton wird entsprechend im Farbkreis verschoben.
invert(%);Negative Umkehrung der Farben des Elements. 0 Ist die normale Wiedergabe. 0.5 erzeugt eine graue Fläche und 1 ist negative Farbwiedergabe.
opacity(%);Deckkraft des Element. Verhält sich wie die CSS Eigenschaft Opacity.
saturate(%);Farb-Sättigung des Elements. 1 ist normale Wiedergabe. 0 ist ein Graustufenbild. 2 ist doppelte Sättigung.
sepia(%);Sepia-Farbeffekt auf das Bild. 0 ist normale Wiedergabe. 1 ist vollständiger Sepia-Effekt.
sepia(%) saturate(%) blur(px);Es können beliebig viele Filter in Kombination hintereinander geschaltet werden. Dabei sollte die Performance des Wiedergabegerätes beachtet werden.
url();Es können SVG Filter über die Angabe der URL angewendet werden.
none;Filter wird deaktiviert.
initial;Standard-Ausgangswert.
inherit;Erbt den Effekt des Eltern-Elements.

drop-shadow

CSS Filter

WertBedeutung
blur(px),Weichzeichner mit Stärke in einer beliebigen CSS Längeneinheit wie z.B. PX, CM, VMAX oder REM. Der Wert 0 ist die normale Darstellung. Die Vererbung von BLUR kann je nach Browser unterschiedlich statt finden. BLUR zeichnet in der Regel alle Kind-Elemente weich aber nicht immer. Es ist mitunter empfehlenswert das Element mit der Eigenschaft BLUR in einen zusätzlichen Container (Wrap) zu packen, damit die Rahmenkonturen scharf bleiben.
brightness(%),Helligkeit des Element. 0 ist völlig schwarz. 1 ist normal. 2 ist doppelt so hell. Die Helligkeit wird linear berechnet.
contrast(%);Kontrast des Elements. 0 ist ohne jeglichen Kontrast. 1 ist normal und 2 ist doppelter Kontrast.
drop-shadow( ... );Schlagschatten des Elements. Verhält sich auf den ersten Blick ähnlich wie Boxshadow. Allerdings werden Pfade und Alphakanäle erkannt. Es wird mit 3 Längenwerten (X,Y,Weichzeichner) und 1 Farbwert definiert.
grayscale(%);Endsättigung des Elements. 0 Ist normale Wiedergabe. 1 ist Graustufenversion.
hue-rotate(deg);Farbton-Rotation mit Gradangabe. Farbton wird entsprechend im Farbkreis verschoben.
invert(%);Negative Umkehrung der Farben des Elements. 0 Ist die normale Wiedergabe. 0.5 erzeugt eine graue Fläche und 1 ist negative Farbwiedergabe.
opacity(%);Deckkraft des Element. Verhält sich wie die CSS Eigenschaft Opacity.
saturate(%);Farb-Sättigung des Elements. 1 ist normale Wiedergabe. 0 ist ein Graustufenbild. 2 ist doppelte Sättigung.
sepia(%);Sepia-Farbeffekt auf das Bild. 0 ist normale Wiedergabe. 1 ist vollständiger Sepia-Effekt.
sepia(%) saturate(%) blur(px);Es können beliebig viele Filter in Kombination hintereinander geschaltet werden. Dabei sollte die Performance des Wiedergabegerätes beachtet werden.
url();Es können SVG Filter über die Angabe der URL angewendet werden.
none;Filter wird deaktiviert.
initial;Standard-Ausgangswert.
inherit;Erbt den Effekt des Eltern-Elements.

grayscale

CSS Filter

[table “table” not found /]

hue

CSS Filter

WertBedeutung
blur(px),Weichzeichner mit Stärke in einer beliebigen CSS Längeneinheit wie z.B. PX, CM, VMAX oder REM. Der Wert 0 ist die normale Darstellung. Die Vererbung von BLUR kann je nach Browser unterschiedlich statt finden. BLUR zeichnet in der Regel alle Kind-Elemente weich aber nicht immer. Es ist mitunter empfehlenswert das Element mit der Eigenschaft BLUR in einen zusätzlichen Container (Wrap) zu packen, damit die Rahmenkonturen scharf bleiben.
brightness(%),Helligkeit des Element. 0 ist völlig schwarz. 1 ist normal. 2 ist doppelt so hell. Die Helligkeit wird linear berechnet.
contrast(%);Kontrast des Elements. 0 ist ohne jeglichen Kontrast. 1 ist normal und 2 ist doppelter Kontrast.
drop-shadow( ... );Schlagschatten des Elements. Verhält sich auf den ersten Blick ähnlich wie Boxshadow. Allerdings werden Pfade und Alphakanäle erkannt. Es wird mit 3 Längenwerten (X,Y,Weichzeichner) und 1 Farbwert definiert.
grayscale(%);Endsättigung des Elements. 0 Ist normale Wiedergabe. 1 ist Graustufenversion.
hue-rotate(deg);Farbton-Rotation mit Gradangabe. Farbton wird entsprechend im Farbkreis verschoben.
invert(%);Negative Umkehrung der Farben des Elements. 0 Ist die normale Wiedergabe. 0.5 erzeugt eine graue Fläche und 1 ist negative Farbwiedergabe.
opacity(%);Deckkraft des Element. Verhält sich wie die CSS Eigenschaft Opacity.
saturate(%);Farb-Sättigung des Elements. 1 ist normale Wiedergabe. 0 ist ein Graustufenbild. 2 ist doppelte Sättigung.
sepia(%);Sepia-Farbeffekt auf das Bild. 0 ist normale Wiedergabe. 1 ist vollständiger Sepia-Effekt.
sepia(%) saturate(%) blur(px);Es können beliebig viele Filter in Kombination hintereinander geschaltet werden. Dabei sollte die Performance des Wiedergabegerätes beachtet werden.
url();Es können SVG Filter über die Angabe der URL angewendet werden.
none;Filter wird deaktiviert.
initial;Standard-Ausgangswert.
inherit;Erbt den Effekt des Eltern-Elements.

drop-shadow
saturate

CSS Filter

WertBedeutung
blur(px),Weichzeichner mit Stärke in einer beliebigen CSS Längeneinheit wie z.B. PX, CM, VMAX oder REM. Der Wert 0 ist die normale Darstellung. Die Vererbung von BLUR kann je nach Browser unterschiedlich statt finden. BLUR zeichnet in der Regel alle Kind-Elemente weich aber nicht immer. Es ist mitunter empfehlenswert das Element mit der Eigenschaft BLUR in einen zusätzlichen Container (Wrap) zu packen, damit die Rahmenkonturen scharf bleiben.
brightness(%),Helligkeit des Element. 0 ist völlig schwarz. 1 ist normal. 2 ist doppelt so hell. Die Helligkeit wird linear berechnet.
contrast(%);Kontrast des Elements. 0 ist ohne jeglichen Kontrast. 1 ist normal und 2 ist doppelter Kontrast.
drop-shadow( ... );Schlagschatten des Elements. Verhält sich auf den ersten Blick ähnlich wie Boxshadow. Allerdings werden Pfade und Alphakanäle erkannt. Es wird mit 3 Längenwerten (X,Y,Weichzeichner) und 1 Farbwert definiert.
grayscale(%);Endsättigung des Elements. 0 Ist normale Wiedergabe. 1 ist Graustufenversion.
hue-rotate(deg);Farbton-Rotation mit Gradangabe. Farbton wird entsprechend im Farbkreis verschoben.
invert(%);Negative Umkehrung der Farben des Elements. 0 Ist die normale Wiedergabe. 0.5 erzeugt eine graue Fläche und 1 ist negative Farbwiedergabe.
opacity(%);Deckkraft des Element. Verhält sich wie die CSS Eigenschaft Opacity.
saturate(%);Farb-Sättigung des Elements. 1 ist normale Wiedergabe. 0 ist ein Graustufenbild. 2 ist doppelte Sättigung.
sepia(%);Sepia-Farbeffekt auf das Bild. 0 ist normale Wiedergabe. 1 ist vollständiger Sepia-Effekt.
sepia(%) saturate(%) blur(px);Es können beliebig viele Filter in Kombination hintereinander geschaltet werden. Dabei sollte die Performance des Wiedergabegerätes beachtet werden.
url();Es können SVG Filter über die Angabe der URL angewendet werden.
none;Filter wird deaktiviert.
initial;Standard-Ausgangswert.
inherit;Erbt den Effekt des Eltern-Elements.

sepia

CSS Filter

WertBedeutung
blur(px),Weichzeichner mit Stärke in einer beliebigen CSS Längeneinheit wie z.B. PX, CM, VMAX oder REM. Der Wert 0 ist die normale Darstellung. Die Vererbung von BLUR kann je nach Browser unterschiedlich statt finden. BLUR zeichnet in der Regel alle Kind-Elemente weich aber nicht immer. Es ist mitunter empfehlenswert das Element mit der Eigenschaft BLUR in einen zusätzlichen Container (Wrap) zu packen, damit die Rahmenkonturen scharf bleiben.
brightness(%),Helligkeit des Element. 0 ist völlig schwarz. 1 ist normal. 2 ist doppelt so hell. Die Helligkeit wird linear berechnet.
contrast(%);Kontrast des Elements. 0 ist ohne jeglichen Kontrast. 1 ist normal und 2 ist doppelter Kontrast.
drop-shadow( ... );Schlagschatten des Elements. Verhält sich auf den ersten Blick ähnlich wie Boxshadow. Allerdings werden Pfade und Alphakanäle erkannt. Es wird mit 3 Längenwerten (X,Y,Weichzeichner) und 1 Farbwert definiert.
grayscale(%);Endsättigung des Elements. 0 Ist normale Wiedergabe. 1 ist Graustufenversion.
hue-rotate(deg);Farbton-Rotation mit Gradangabe. Farbton wird entsprechend im Farbkreis verschoben.
invert(%);Negative Umkehrung der Farben des Elements. 0 Ist die normale Wiedergabe. 0.5 erzeugt eine graue Fläche und 1 ist negative Farbwiedergabe.
opacity(%);Deckkraft des Element. Verhält sich wie die CSS Eigenschaft Opacity.
saturate(%);Farb-Sättigung des Elements. 1 ist normale Wiedergabe. 0 ist ein Graustufenbild. 2 ist doppelte Sättigung.
sepia(%);Sepia-Farbeffekt auf das Bild. 0 ist normale Wiedergabe. 1 ist vollständiger Sepia-Effekt.
sepia(%) saturate(%) blur(px);Es können beliebig viele Filter in Kombination hintereinander geschaltet werden. Dabei sollte die Performance des Wiedergabegerätes beachtet werden.
url();Es können SVG Filter über die Angabe der URL angewendet werden.
none;Filter wird deaktiviert.
initial;Standard-Ausgangswert.
inherit;Erbt den Effekt des Eltern-Elements.

Kombi#1

Hinweis: Man muss die Performance im Auge behalten. Je mehr Filter desto eher wird die Darstellung ruckelig.

-

CSS Filter

WertBedeutung
blur(px),Weichzeichner mit Stärke in einer beliebigen CSS Längeneinheit wie z.B. PX, CM, VMAX oder REM. Der Wert 0 ist die normale Darstellung. Die Vererbung von BLUR kann je nach Browser unterschiedlich statt finden. BLUR zeichnet in der Regel alle Kind-Elemente weich aber nicht immer. Es ist mitunter empfehlenswert das Element mit der Eigenschaft BLUR in einen zusätzlichen Container (Wrap) zu packen, damit die Rahmenkonturen scharf bleiben.
brightness(%),Helligkeit des Element. 0 ist völlig schwarz. 1 ist normal. 2 ist doppelt so hell. Die Helligkeit wird linear berechnet.
contrast(%);Kontrast des Elements. 0 ist ohne jeglichen Kontrast. 1 ist normal und 2 ist doppelter Kontrast.
drop-shadow( ... );Schlagschatten des Elements. Verhält sich auf den ersten Blick ähnlich wie Boxshadow. Allerdings werden Pfade und Alphakanäle erkannt. Es wird mit 3 Längenwerten (X,Y,Weichzeichner) und 1 Farbwert definiert.
grayscale(%);Endsättigung des Elements. 0 Ist normale Wiedergabe. 1 ist Graustufenversion.
hue-rotate(deg);Farbton-Rotation mit Gradangabe. Farbton wird entsprechend im Farbkreis verschoben.
invert(%);Negative Umkehrung der Farben des Elements. 0 Ist die normale Wiedergabe. 0.5 erzeugt eine graue Fläche und 1 ist negative Farbwiedergabe.
opacity(%);Deckkraft des Element. Verhält sich wie die CSS Eigenschaft Opacity.
saturate(%);Farb-Sättigung des Elements. 1 ist normale Wiedergabe. 0 ist ein Graustufenbild. 2 ist doppelte Sättigung.
sepia(%);Sepia-Farbeffekt auf das Bild. 0 ist normale Wiedergabe. 1 ist vollständiger Sepia-Effekt.
sepia(%) saturate(%) blur(px);Es können beliebig viele Filter in Kombination hintereinander geschaltet werden. Dabei sollte die Performance des Wiedergabegerätes beachtet werden.
url();Es können SVG Filter über die Angabe der URL angewendet werden.
none;Filter wird deaktiviert.
initial;Standard-Ausgangswert.
inherit;Erbt den Effekt des Eltern-Elements.

Kombi#2

Hinweis: Man muss die Performance im Auge behalten. Je mehr Filter desto eher wird die Darstellung ruckelig.

CSS Filter

WertBedeutung
blur(px),Weichzeichner mit Stärke in einer beliebigen CSS Längeneinheit wie z.B. PX, CM, VMAX oder REM. Der Wert 0 ist die normale Darstellung. Die Vererbung von BLUR kann je nach Browser unterschiedlich statt finden. BLUR zeichnet in der Regel alle Kind-Elemente weich aber nicht immer. Es ist mitunter empfehlenswert das Element mit der Eigenschaft BLUR in einen zusätzlichen Container (Wrap) zu packen, damit die Rahmenkonturen scharf bleiben.
brightness(%),Helligkeit des Element. 0 ist völlig schwarz. 1 ist normal. 2 ist doppelt so hell. Die Helligkeit wird linear berechnet.
contrast(%);Kontrast des Elements. 0 ist ohne jeglichen Kontrast. 1 ist normal und 2 ist doppelter Kontrast.
drop-shadow( ... );Schlagschatten des Elements. Verhält sich auf den ersten Blick ähnlich wie Boxshadow. Allerdings werden Pfade und Alphakanäle erkannt. Es wird mit 3 Längenwerten (X,Y,Weichzeichner) und 1 Farbwert definiert.
grayscale(%);Endsättigung des Elements. 0 Ist normale Wiedergabe. 1 ist Graustufenversion.
hue-rotate(deg);Farbton-Rotation mit Gradangabe. Farbton wird entsprechend im Farbkreis verschoben.
invert(%);Negative Umkehrung der Farben des Elements. 0 Ist die normale Wiedergabe. 0.5 erzeugt eine graue Fläche und 1 ist negative Farbwiedergabe.
opacity(%);Deckkraft des Element. Verhält sich wie die CSS Eigenschaft Opacity.
saturate(%);Farb-Sättigung des Elements. 1 ist normale Wiedergabe. 0 ist ein Graustufenbild. 2 ist doppelte Sättigung.
sepia(%);Sepia-Farbeffekt auf das Bild. 0 ist normale Wiedergabe. 1 ist vollständiger Sepia-Effekt.
sepia(%) saturate(%) blur(px);Es können beliebig viele Filter in Kombination hintereinander geschaltet werden. Dabei sollte die Performance des Wiedergabegerätes beachtet werden.
url();Es können SVG Filter über die Angabe der URL angewendet werden.
none;Filter wird deaktiviert.
initial;Standard-Ausgangswert.
inherit;Erbt den Effekt des Eltern-Elements.

url(...)

Hinweis: Man kann mit URL auf SVG Filter verweisen. Animationen sind bei filter:(url) nur mit Javascript möglich.

CSS Filter

WertBedeutung
blur(px),Weichzeichner mit Stärke in einer beliebigen CSS Längeneinheit wie z.B. PX, CM, VMAX oder REM. Der Wert 0 ist die normale Darstellung. Die Vererbung von BLUR kann je nach Browser unterschiedlich statt finden. BLUR zeichnet in der Regel alle Kind-Elemente weich aber nicht immer. Es ist mitunter empfehlenswert das Element mit der Eigenschaft BLUR in einen zusätzlichen Container (Wrap) zu packen, damit die Rahmenkonturen scharf bleiben.
brightness(%),Helligkeit des Element. 0 ist völlig schwarz. 1 ist normal. 2 ist doppelt so hell. Die Helligkeit wird linear berechnet.
contrast(%);Kontrast des Elements. 0 ist ohne jeglichen Kontrast. 1 ist normal und 2 ist doppelter Kontrast.
drop-shadow( ... );Schlagschatten des Elements. Verhält sich auf den ersten Blick ähnlich wie Boxshadow. Allerdings werden Pfade und Alphakanäle erkannt. Es wird mit 3 Längenwerten (X,Y,Weichzeichner) und 1 Farbwert definiert.
grayscale(%);Endsättigung des Elements. 0 Ist normale Wiedergabe. 1 ist Graustufenversion.
hue-rotate(deg);Farbton-Rotation mit Gradangabe. Farbton wird entsprechend im Farbkreis verschoben.
invert(%);Negative Umkehrung der Farben des Elements. 0 Ist die normale Wiedergabe. 0.5 erzeugt eine graue Fläche und 1 ist negative Farbwiedergabe.
opacity(%);Deckkraft des Element. Verhält sich wie die CSS Eigenschaft Opacity.
saturate(%);Farb-Sättigung des Elements. 1 ist normale Wiedergabe. 0 ist ein Graustufenbild. 2 ist doppelte Sättigung.
sepia(%);Sepia-Farbeffekt auf das Bild. 0 ist normale Wiedergabe. 1 ist vollständiger Sepia-Effekt.
sepia(%) saturate(%) blur(px);Es können beliebig viele Filter in Kombination hintereinander geschaltet werden. Dabei sollte die Performance des Wiedergabegerätes beachtet werden.
url();Es können SVG Filter über die Angabe der URL angewendet werden.
none;Filter wird deaktiviert.
initial;Standard-Ausgangswert.
inherit;Erbt den Effekt des Eltern-Elements.

► Weitere Infos

Externe Quellen

Filter Effects Module Level 1

https://www.w3.org/TR/filter-effects-1/

Working Draft der W3C.


Selfhtml CSS Filter

https://wiki.selfhtml.org(...)filter

Artikel bei Selfhtml zu den Filtern.


can i use filter?

http://caniuse.com/#feat=css-filters

Die Unterstützung ist bei neueren Browsern ganz gut. Man sollte mit Autoprefixer die Kompatibilität verbreitern.


Filter Polyfill

https://github.com/Schepp/CSS-Filters-Polyfill

Der Polyfill erhöht die Unterstützung bei ältern Browsern.


CSS Filter

https://developer.mozilla.org(...)CSS/filter

Übersicht bei Mozilla DN.


CSS Filter-Effekte

https://blog.kulturbanause.de/(...)css-filter-effekte/

Artikel bei Kulturbanause.


SVG Filter-Effekte

http://svg.tutorial.aptico.de(...)Filtereffekte

Artikel bei Kulturbanause.