Web / CSS

Schatten-Generator

Erstelle CSS-Schatten für box-shadow und text-shadow mit Live-Vorschau. Das Tool hilft bei Karten, Buttons, Texten, Overlays und UI-Elementen.

Generator

Schatten konfigurieren

Alle Einstellungen werden lokal im Browser verarbeitet. Es werden keine Eingaben an den Server gesendet.

Schattenart

CSS-Eigenschaft Profil CSS-Selector

Werte

Offset X 0px Offset Y 18px Blur 42px Spread -18px Transparenz 28%

Farbe und Ausgabe

Schattenfarbe Vorschau-Hintergrund Elementfarbe Ausgabe

Inneren Schatten verwenden Beispiel mit abgerundeten Ecken Werte automatisch aktualisieren

Schatten-Vorschau

Aktueller Wert box-shadow

Passe die Slider an, um den Schatten live zu verändern.

CSS-Code

Für Karten, Panels, Buttons und Overlays. Die Werte bestehen aus X-Offset, Y-Offset, Blur, Spread und Farbe.

Für Überschriften, Hero-Bereiche und leichte Lesbarkeitsverbesserung auf Bildern. Spread wird bei Textschatten nicht verwendet.

Für moderne Oberflächen wirken größere Blur-Werte mit niedriger Transparenz oft ruhiger als harte, dunkle Schatten.