Zum Inhalt springen
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

CSS-Schatten-Generator (box-shadow)

Gestalten Sie einen CSS-Schatten, indem Sie Versatz, Unschärfe, Ausdehnung und Farbe einstellen, mit Live-Vorschau und kopierbereitem box-shadow-Code.

Wird auf Ihrem Gerät verarbeitet. Es wird nichts an einen Server gesendet.
box-shadow: 0px 8px 24px -4px rgba(16, 32, 29, 0.25);

Setzt die CSS-Syntax box-shadow aus ihren fünf Parametern zusammen: horizontaler Versatz, vertikaler Versatz, Unschärfe, Ausdehnung und Farbe, dazu die Option inset.

Anwendungsfälle

  • Einer Karte oder einem Button Tiefe verleihen.
  • Einen Erhebungseffekt für ein Modal gestalten.
  • Einen dezenten Innenschatten entwerfen.

So funktioniert's

  1. 1

    Werte anpassen

    Ändern Sie Versatz X/Y, Unschärfe, Ausdehnung und Farbe.

  2. 2

    Bei Bedarf „Inset“ aktivieren

    Setzen Sie das Häkchen für einen Innenschatten.

  3. 3

    CSS kopieren

    Kopieren Sie die fertige box-shadow-Eigenschaft.

Technische Details

  • Versatz, Unschärfe und Ausdehnung werden in Pixeln angegeben; negative Versätze verschieben den Schatten nach links bzw. oben.
  • Im Farbfeld ist jede CSS-Farbe erlaubt. Schatten wirken meist natürlicher mit Transparenz, etwa rgba(0, 0, 0, 0.2), statt mit einer Vollfarbe.
  • Erzeugt wird ein einzelner Schatten. Um mehrere zu kombinieren (einen weichen, breiten und einen kurzen, scharfen), trennen Sie sie im fertigen CSS durch Kommas.

Häufige Fragen

Was bewirkt der Wert „Ausdehnung“ (spread)?

Er vergrößert oder verkleinert den Schatten relativ zur Elementgröße; negative Werte machen ihn kleiner als das Element.

Ähnliche Tools

← Farben & Design