CSS Box-Schatten-Generator
Entwerfen Sie CSS-Box-Schatten mit Live-Vorschau und kopierfertigem Code.
Kurze Antwort: CSS Box-Schatten-Generator: Gestalte CSS-Box-Schatten per Live-Vorschau und erhalte direkt kopierbaren Code. Läuft vollständig im Browser, kostenlos und ohne Registrierung.
Zuletzt aktualisiert
Gut zu wissen
The CSS box-shadow property takes up to four length values in a fixed order — horizontal offset, vertical offset, blur radius, spread radius — followed by a color. The order matters and is easy to misremember: a positive vertical offset pushes the shadow down, and the blur radius softens the edge while the spread radius grows or shrinks the whole shadow before it is blurred. Dragging the sliders here removes the guesswork and shows the result instantly.
For realistic depth, keep shadows subtle: a small offset, a generous blur and a low opacity read as a natural drop shadow, whereas a hard, opaque shadow looks like a 1990s bevel. A widely used technique is to stack several shadows with increasing blur to mimic how light actually diffuses — you can do that by pasting multiple declarations separated by commas, since a single box-shadow accepts a comma-separated list.
Two things to know: adding the inset keyword flips the shadow to the inside of the element, which is handy for pressed-button and inset-field effects, and box-shadow does not affect layout or the element's box size the way border does, so it never nudges neighboring elements. For rounded corners that the shadow will follow, pair this with the border-radius generator, and check any shadowed text stays legible with the contrast checker.
Häufig gestellte Fragen
- Ist der Box-Schatten-Generator kostenlos?
- Ja — kostenlos, keine Anmeldung.
- Kann ich mehrere Schatten hinzufügen?
- Der Generator erzeugt einen einzelnen Schatten; kombinieren Sie die Ausgaben mit Kommas, wenn Sie geschichtete Schatten benötigen.
- Welche Einheit wird verwendet?
- Pixel — die gängigste Einheit für Box-Schatten-Offsets.
- Unterstützt die Ausgabe Inset?
- Nicht in dieser Version — setzen Sie Inset manuell im resultierenden CSS, wenn Sie es benötigen.
- Werden meine Einstellungen gespeichert?
- Nein — die Vorschau und das CSS laufen vollständig in Ihrem Browser.