Zum Inhalt springen
QuickToolio
esEspanolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

CSS-Schatten-Generator (box-shadow)

Passe Versatz, Unschärfe, Ausdehnung und Farbe eines CSS-Schattens mit Live-Vorschau an.

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);

Gestalte einen CSS-Schatten, indem du Versatz, Unschärfe, Ausbreitung und Farbe anpasst, mit Live-Vorschau und fertigem box-shadow-Code zum Kopieren.

Erstellt die CSS-box-shadow-Syntax mit ihren fünf Parametern: horizontaler Versatz, vertikaler Versatz, Unschärfe, Ausbreitung und Farbe, plus der Inset-Option.

Anwendungsfälle

  • Einer Karte oder einem Button Tiefe verleihen.
  • Einen Erhöhungseffekt für ein Modal erstellen.
  • Einen dezenten inneren Schatten gestalten.

So funktioniert's

  1. 1

    Werte anpassen

    Ändere X-/Y-Versatz, Unschärfe, Ausbreitung und Farbe.

  2. 2

    Inset bei Bedarf aktivieren

    Aktiviere das Kästchen für einen inneren Schatten.

  3. 3

    CSS kopieren

    Kopiere die box-shadow-Eigenschaft zum Einfügen.

Häufige Fragen

Was bewirkt der Wert 'Ausbreitung'?

Er steuert, wie stark der Schatten im Verhältnis zur Größe des Elements wächst oder schrumpft; negative Werte machen ihn kleiner als das Element.

Ähnliche Tools

← Farben & Design