CSS-Box-Shadow-Generator
Stell einen Box-Schatten mit Reglern und Live-Vorschau ein und kopiere anschließend das CSS. Die Option für gestaffelte Schatten ergänzt einen zarten Kontaktschatten für eine natürlichere, modernere Wirkung.
Keine Daten nötig
So geht's
- Stelle Versatz, Weichzeichnung, Ausbreitung und Deckkraft ein.
- Wähle die Farbe des Schattens.
- Schalte inset oder gestaffelte Schatten zu.
- Kopiere das CSS.
Wie es funktioniert
box-shadow erwartet einen waagerechten und einen senkrechten Versatz, einen Weichzeichnungsradius, einen Ausbreitungsradius und eine Farbe. Eine negative Ausbreitung verkleinert den Schatten und vermeidet so einen schweren Lichthof. Legt man einen engen Schatten mit geringer Deckkraft unter einen größeren, weichen, ahmt das nach, wie echtes Licht zugleich einen Kontaktschatten und einen Umgebungsschatten erzeugt.
Beispiele
- Karte
- 0px 12px 32px -8px rgba(15, 23, 42, 0.25)
Typische Anwendungsfälle
- Karten, Dialoge und Dropdowns
- Buttons und Hover-Zustände
- Design-Systeme
Datenschutz und Sicherheit
Dieses Tool benötigt weder persönliche Daten noch Dateien. Die Ergebnisse entstehen auf deinem Gerät. Wie jedes Tool mit Dateien umgeht
Häufige Fragen
Kostet box-shadow Leistung?
Große, weich gezeichnete Schatten können beim Animieren teuer werden. Animiere lieber die Deckkraft eines Pseudo-Elements als den Schatten selbst.
Kann ich das auf Text anwenden?
Für Text gibt es text-shadow; dort fehlt der Wert für die Ausbreitung.
Zuletzt aktualisiert: