CSS-Box-Shadow-Generator

Erstellen Sie CSS-box-shadow-Eigenschaften visuell mit Schiebereglern. Sehen Sie eine Live-Vorschau und kopieren Sie den CSS-Code. Mehrere Schatten können überlagert werden.

Studio · neutrale Umgebung
0px
8px
24px
-6px
14%

  

Funktionen

Slider controls
Color picker
Inset toggle
Multiple layers
Live preview & CSS code

Anleitung

1. Den Schatten mit den Reglern formen — die neutrale Karte auf der Fläche zeigt genau das Endergebnis.

2. Echte Schatten sind mehrschichtig: bis zu vier Ebenen stapeln oder mit einer Vorlage (Soft, Elevated, Floating, Inner) starten.

3. Die Arbeitsfläche umschalten, um den Schatten auf Weiß, Grau und Dunkel zu prüfen, dann das CSS kopieren.

Häufig gestellte Fragen

What is box-shadow?
The CSS box-shadow property adds shadow effects around an element's frame.

Verwandte Werkzeuge