CSS Box-Shadow-Generator – Mehrschichtige Schatten mit Vorschau
Gestalte weiche, harte, mehrschichtige oder innere Schatten mit Schiebereglern und Live-Vorschau und kopiere sauberen box-shadow-Code. Bis zu sechs Ebenen sorgen für realistische Tiefe.
Regler für horizontalen und vertikalen Versatz, Unschärfe, Ausdehnung, Farbe und Deckkraft bewegen – Vorschau und CSS ändern sich sofort. Mit + kommt eine weitere Ebene dazu, „inset“ erzeugt einen inneren Schatten, oder du wählst eine Vorlage wie „Fließend (Ebenen)“ oder „Neumorphismus“. Dann die box-shadow-Zeile kopieren.
So funktioniert: CSS Box-Shadow-Generator
- Vorlage wählen oder mit dem weichen Standardschatten starten.
- Versatz, Unschärfe, Ausdehnung und Deckkraft einstellen.
- Mit + weitere Ebenen für weichere Tiefe hinzufügen.
- Hintergrund, Boxfarbe und Radius an dein Design anpassen.
- CSS kopieren und ins Stylesheet einfügen.
Die box-shadow-Syntax
Ein Schatten wird als `box-shadow: x y unschärfe ausdehnung farbe` geschrieben, optional mit `inset` am Anfang. Mehrere Schatten trennst du mit Kommas; der erste liegt oben.
| Wert | Wirkung |
|---|---|
| x / y | Verschiebt den Schatten nach rechts/unten (negativ: links/oben) |
| Unschärfe | Weichzeichnung; 0 ergibt eine harte Kante |
| Ausdehnung | Vergrößert oder verkleinert den Schatten vor dem Weichzeichnen |
| Farbe | Meist Schwarz oder ein dunkler Ton mit wenig Deckkraft |
| inset | Zeichnet den Schatten innen |
Warum mehrschichtige Schatten besser aussehen
Echte Objekte werfen nahe Schatten scharf und ferne Schatten weich. Ein einzelner großer, verwischter Schatten wirkt oft flach. Mehrere Schatten, deren Versatz und Unschärfe sich jeweils verdoppeln – 1, 2, 4, 8 und 16 px bei geringer Deckkraft –, erzeugen die weiche, natürliche Tiefe moderner Designsysteme. Genau das macht die Vorlage „Fließend (Ebenen)“.
Tipps für schöne Schatten
- Deckkraft niedrig halten: 5–20 % Schwarz reichen auf hellen Flächen.
- Negative Ausdehnung mit mehr Unschärfe lässt Elemente schweben.
- Den Schatten mit dem Farbton des Hintergrunds einfärben statt reinem Schwarz.
- Auf dunklen Hintergründen sind Schatten kaum sichtbar; dort helfen hellere Flächen oder Rahmen.
- Für Hover-Effekte besser `transform` animieren statt den Schatten.
Neumorphismus und innere Schatten
Neumorphismus kombiniert einen hellen Schatten oben links mit einem dunklen unten rechts auf einem Element in Hintergrundfarbe, als wäre es aus der Fläche geprägt. Das wirkt auffällig, hat aber wenig Kontrast – nicht für wichtige Buttons verwenden. Innere Schatten passen gut zu Eingabefeldern und gedrückten Zuständen.
Verwandte CSS-Tools
Ecken rundest du mit dem Border-Radius-Generator, Hintergründe entstehen im CSS-Verlauf-Generator, Milchglas-Panels im Glassmorphism-Generator, und das fertige Stylesheet verkleinert der CSS-Minifier und -Formatierer. Alles läuft im Browser.
Diese kostenlosen Tools könnten dir auch helfen: JSON formatieren, Passwort-Generator und Regex-Tester.
Häufige Fragen
Wie gebe ich einem div einen Schatten?
Mit box-shadow, z. B. box-shadow: 0 10px 30px -5px rgba(0,0,0,.2). Kopiere einfach einen Schatten aus dem Generator.
Kann ich mehrere Schatten verwenden?
Ja, durch Kommas getrennt. Der Generator erlaubt bis zu sechs Ebenen.
Was bewirkt spread?
Die Ausdehnung vergrößert (positiv) oder verkleinert (negativ) den Schatten vor dem Weichzeichnen.
Wie mache ich einen inneren Schatten?
Mit dem Schlüsselwort inset oder dem Häkchen „Innerer Schatten“.
Beeinflusst box-shadow das Layout?
Nein. Schatten nehmen keinen Platz ein und verschieben nichts.
Zuletzt aktualisiert: