CSS Box-Shadow-Generator
Mehrschichtige Boxschatten visuell erstellen und das CSS kopieren
Anleitung
- Ebene hinzufügen — Klicken Sie auf „Ebene hinzufügen”, um mehrere Schatten auf demselben Element zu stapeln.
- Geometrie anpassen — Stellen Sie Versatz X, Versatz Y, Unschärferadius und Ausdehnung mit den Schiebereglern oder Zahleneingaben ein.
- Farbe wählen — Bestimmen Sie die Schattenfarbe und feinjustieren Sie die Deckkraft für eine dezente, realistische Tiefe.
- Inset umschalten — Wandeln Sie beliebige Ebenen in innere Schatten um, wenn Sie einen vertieften Effekt benötigen.
- CSS kopieren — Kopieren Sie die generierte
box-shadow-Deklaration und fügen Sie sie in Ihr Stylesheet ein.
Funktionen
- Unbegrenzte Ebenen — Fügen Sie Schattenschichten frei hinzu, duplizieren und entfernen Sie sie; jede Ebene wird unabhängig konfiguriert.
- Schieberegler + Zahleneingaben — Ziehen Sie für schnelles Experimentieren oder geben Sie exakte Pixelwerte ein.
- Live-Vorschau — Sehen Sie jede Änderung sofort an einer Demobox vor einem frei wählbaren Hintergrund.
- Inset-Schatten — Erstellen Sie innere Schatten für eingedrückte, geprägte oder neumorphe Designs.
- 100 % clientseitig — Alles läuft in Ihrem Browser; keine Daten verlassen Ihr Gerät.
Anwendungsfälle
- Kartendesign: Komponieren Sie einen weichen, mehrschichtigen Höhenschatten für Karten und Dialoge, der auf jedem Hintergrund natürlich wirkt.
- Neumorphismus: Kombinieren Sie helle und dunkle Inset-Ebenen für den weichen, extrudierten Look — ganz ohne handgeschriebenes CSS.
- Design-Übergabe: Generieren Sie saubere, produktionsreife
box-shadow-Werte, statt Offsets in den DevTools zu erraten.
Verwandte Tools
- Color Picker — Finden und konvertieren Sie die perfekte Schattenfarbe.
- CSS Gradient Generator — Kombinieren Sie Ihre Schatten mit eigenen CSS-Verläufen.
- Color Contrast Checker — Prüfen Sie, ob Text auf dem gewählten Hintergrund lesbar bleibt.
Häufig gestellte Fragen
Was bewirkt die Inset-Option?
Ein Inset-Schatten wird innerhalb der Border-Box des Elements gezeichnet statt außerhalb, wodurch das Element eingedrückt oder vertieft wirkt. Aktivieren Sie den Inset-Schalter auf einer beliebigen Ebene, um diese von einem Schlagschatten in einen inneren Schatten umzuwandeln.
Was ist der Unterschied zwischen Unschärferadius und Ausdehnung?
Der Unschärferadius bestimmt, wie weich die Schattenkanten sind — größere Werte erzeugen einen diffuseren, weicheren Schatten. Die Ausdehnung vergrößert oder verkleinert den Schatten in alle Richtungen: Positive Werte machen ihn größer als das Element, negative Werte kleiner.
Kann ich mehrere Schatten auf einem Element stapeln?
Ja. CSS unterstützt kommagetrennte Schattenschichten, und dieser Generator ermöglicht das Hinzufügen, Duplizieren und Entfernen beliebig vieler Ebenen. Die Ebenen werden von vorne nach hinten gezeichnet — die erste Ebene in der Liste liegt also ganz oben.