CSS-Box-Shadow-Generator

Stelle Versatz, Weichzeichnung, Ausbreitung, Farbe und Deckkraft ein, während du das Ergebnis siehst, und nimm das CSS mit. Enthält Vorlagen, die mehrere Schatten überlagern, für ein natürlicheres Tiefengefühl.

🎨 Alles läuft in deinem Browser. Keine Installation, keine Anmeldung.

Versatz X0px

Versatz Y8px

Weichzeichnung20px

Ausbreitung-4px

Schattenfarbe

Deckkraft20%

Innenschatten (inset) — wirkt eingedrückt

box-shadow: 0px 8px 20px -4px rgba(15, 23, 42, 0.20);

Ein natürlicher Schatten fällt meist gerade nach unten (Versatz X von 0) und nutzt ein blasses Marineblau statt Schwarz — etwas dunkler als der Hintergrund. Rein schwarze Schatten wirken trüb.

Was dieses Werkzeug macht

Versatz, Weichzeichnung, Ausbreitung und Farbe
Innenschatten (inset) möglich
Natürliche mehrlagige Vorlagen
CSS kopieren

Weitere Farbwerkzeuge

CSS-Gradient-GeneratorEinen CSS-Verlauf aus zwei oder drei Farben bauen Farbpaletten-GeneratorPassende Farben zu einer Grundfarbe, nach Regel Farbabstufungen erzeugenAus einer Farbe eine 50–900-Skala machen FarbmischerDie Farbe zwischen zwei Farben finden

Farben können je nach Bildschirm und Farbprofil etwas anders aussehen.