CSS drop-shadow() Funktion

Definition und Verwendung

CSS drop-shadow() Filterfunktion wendet Schatteneffekte auf das Bild an.

Fügt dem Bild verschiedene Schatteneffekte hinzu:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

Fügt dem Bild verschiedene Schatteneffekte hinzu (verwendet negative Werte für horizontale und vertikale Schatten):

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

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

Wert	Beschreibung
h-shadow	Erforderlich. Gibt den Pixelwert der horizontalen Schattenposition an. Negative Werte platzieren den Schatten links auf dem Bild.
v-shadow	Erforderlich. Gibt den Pixelwert der vertikalen Schattenposition an. Negative Werte platzieren den Schatten oben auf dem Bild.
blur	Optional. Fügt dem Schatten einen Verwischungseffekt hinzu, Einheit in Pixel. Je größer der Wert, desto stärker der Verwischungseffekt (der Schatten wird größer und heller). Negative Werte sind nicht erlaubt. Falls kein Wert angegeben wird, ist der Standardwert 0 (der Schatten hat klare Kanten).
spread	Optional. Muss in Pixel-Werten angegeben werden. Positive Werte erweitern und vergrößern den Schatten, negative Werte verkleinern ihn. Falls nicht angegeben, ist der Standardwert 0 (der Schatten hat die gleiche Größe wie das Element).
color	Optional. Fügt dem Schatten eine Farbe hinzu. Falls nicht angegeben, hängt die Farbe vom Browser ab (normalerweise schwarz).

Version:	CSS Filter Effects Module Level 1

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Funktion vollständig unterstützen.

Chrome	Edge	Firefox	Safari	Opera
18	12	35	6	15