CSS-Box-Schatten-Generator
Erstellen Sie CSS-Box-Schatten visuell mit Live-Vorschau
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25);Problem Melden
Sie haben einen Bug gefunden oder einen Vorschlag? Helfen Sie uns, dieses Tool zu verbessern.
Was ist dieses Tool?
Der CSS-Box-Schatten-Generator erstellt produktionsreife box-shadow-Deklarationen mit Live-Vorschau. Unterstützt einfache und mehrschichtige Schatten mit Steuerelementen für Horizontal-/Vertikalversatz, Weichzeichnungsradius, Ausbreitungsradius, Farbe und die inset-Option. Erzeugt komplexe Schatteneffekte visuell, ohne CSS manuell zu schreiben.
Anwendung
- 1
Schattenebene hinzufügen
Klicken Sie auf Hinzufügen, um eine neue Schattenebene zu erstellen.
- 2
Parameter anpassen
Stellen Sie X/Y-Versatz, Weichzeichnung, Ausbreitung, Farbe und Opazität jeder Ebene ein.
- 3
Vorschau und kopieren
Siehen Sie die Live-Vorschau und kopieren Sie den generierten CSS-Code.
Häufig gestellte Fragen
Wie funktioniert box-shadow?
box-shadow fügt einen Schatteneffekt um den Rahmen eines Elements hinzu. Syntax: box-shadow: h-offset v-offset blur spread color inset. Mehrere Schatten werden durch Kommas getrennt. Der Browser rendert jede Schattenebene unabhängig und setzt sie zusammen. Verwenden Sie mehrere Ebenen, um komplexe Tiefeneffekte zu erstellen.
Was macht einen Schatten realistisch?
Realistische Schatten haben eine stärkere Weichzeichnung im Verhältnis zum Versatz (typisch 3-5-fach), eine geringfügig niedrigere Opazität (10-30 %) und warmtönige Farben. Mehrere Schattenebenen mit unterschiedlichen Weichzeichnungsgrößen erzeugen eine natürlichere Tiefe. Material Design stellt Schattenwerte für verschiedene Elevationsebenen bereit.
Was soll ich tun, wenn das Ergebnis falsch erscheint?
Prüfen Sie Ihre Eingabewerte doppelt. Das Tool verwendet Standardformeln, aber Grenzfälle können eine manuelle Überprüfung erfordern.