Ueberblick
Dieser Box-Shadow-Generator hilft dir dabei, präzise CSS-Schatten mit Live-Vorschau und sofortiger Codeausgabe zu erstellen. Er eignet sich für Buttons, Karten, Dialoge, Bilder und andere UI-Elemente, die Tiefe und visuelle Trennung brauchen.
Anwendungsfaelle
- Schatten für Karten, Buttons und Modals gestalten.
- Dezente Elevation-Effekte für Dashboards und Landingpages erstellen.
- Inset-Schatten für Eingabefelder und Panels erzeugen.
- Unterschiedliche Schattenstile schnell testen, ohne CSS manuell anzupassen.
So funktioniert es
- 1
Lege den horizontalen und vertikalen Versatz fest.
- 2
Passe Unschärfe, Ausbreitung und Deckkraft an den gewünschten Stil an.
- 3
Wähle die Schattenfarbe und optional den Inset-Modus.
- 4
Prüfe die Vorschau live während der Bearbeitung.
- 5
Kopiere den generierten CSS-Code und füge ihn in dein Stylesheet ein.
Beispiele
Weicher Kartenschatten
Eingabe: 0 8px 24px 0 rgba(0,0,0,0.12)
Ausgabe: box-shadow: 0 8px 24px 0 rgba(0,0,0,0.12);
Ein weicher Schatten für Karten und Inhaltsblöcke.
Stärkerer Buttonschatten
Eingabe: 0 4px 12px -2px rgba(0,0,0,0.25)
Ausgabe: box-shadow: 0 4px 12px -2px rgba(0,0,0,0.25);
Ein deutlicherer Schatten für interaktive Elemente.
FAQ
Welche CSS-Eigenschaft erzeugt dieses Tool?
Es erzeugt box-shadow-Werte, die du direkt in CSS verwenden kannst.
Kann ich Inset-Schatten erstellen?
Ja. Aktiviere den Inset-Modus für einen inneren Schatteneffekt.
Ist die Ausgabe sofort kopierbar?
Ja. Der generierte CSS-Code ist für schnelles Kopieren und Einfügen vorbereitet.
Unterstützt das Tool mehrere Schatten?
Ja, du kannst Werte bei Bedarf auch manuell zu mehreren Schattenebenen kombinieren.