Deutsch
Mehrlagigen CSS-Box-Shadow mit Live-Vorschau bauen und produktionsfertiges CSS kopieren.
Zuletzt aktualisiert
box-shadow:
0px 8px 24px 0px rgba(0, 0, 0, 0.18);box-shadow ist die CSS-Eigenschaft, die jedem Element Schlagschatten, Glow oder eingedrückte Schattierungen verpasst. Sie ist der größte Hebel, um einem flachen Design *Tiefe* zu geben - Karten heben sich von der Seite ab, Modals schweben darüber, Buttons wirken drückbar.
Der Trick: Ein *guter* Schatten ist selten eine einzige Ebene. Echte Schatten sind weicher und haben Umgebungslicht - die meisten Designsysteme (Material, iOS, Tailwind) stapeln 2–3 box-shadow-Anweisungen mit unterschiedlichen Offsets und Deckkräften. Per Hand ist das fummelig; ein Generator lässt dich jede Ebene visuell justieren und das kombinierte Ergebnis live sehen.
Der Coddy-Generator unterstützt beliebig viele Ebenen, *äußere* wie *inset*-Schatten, Farbe und Deckkraft pro Ebene und Presets für die gängigsten Muster: dezente Karten, scharfe Drops, Brand-Glows, Inset-Vertiefungen und neumorphe Flächen. CSS kopieren, ins Stylesheet einfügen - kein Upload, kein Konto, kein Wasserzeichen.
box-shadow: [inset] <x> <y> <blur> <spread> <color>. inset setzt den Schatten *innen*; ohne inset liegt er außen.Wähle ein Preset, das deinem Wunschgefühl nahekommt - dezente Karte, weiche Elevation, scharfer Drop, Brand-Glow, Inset-Vertiefung oder neumorph. Die Presets sind gute Startpunkte zum Feinjustieren.
Verschiebe die Slider für X/Y, Blur, Spread, Farbe, Deckkraft. Die Vorschau links aktualisiert sich live. Niedrige Deckkraft + hoher Blur wirken *weicher*.
Klicke *Ebene hinzufügen* für eine zweite Schattenebene. Echte Tiefe arbeitet fast immer mit zwei Ebenen: eine kurze, dichte Kontaktebene und eine lange, weiche Umgebungsebene.
Mit aktivem *Inset* wird der Schatten innen gezeichnet. Kombiniert mit einer leichten Außenschattierung ergibt das einen gedrückten Button.
Wenn die Vorschau passt, klicke *CSS kopieren* und füge die Regel ins Stylesheet ein - alle aktiven Ebenen sind enthalten.
Jeder Wert in box-shadow: x y blur spread color und seine Rolle.
| Wert | Effekt | Typischer Bereich |
|---|---|---|
| X-Offset | Schatten horizontal verschieben; positiv = rechts | −40px bis 40px |
| Y-Offset | Schatten vertikal verschieben; positiv = nach unten | 0px bis 40px für natürliches Licht |
| Blur | Weichzeichnet die Kante | 0px bis 80px |
| Spread | Vergrößert oder verkleinert vor dem Blur | −30px bis 30px |
| Farbe | Beliebige CSS-Farbe; rgba() für Deckkraft pro Ebene | rgba(0,0,0,0.05–0.3) für natürliche Schatten |
inset | Schatten innen zeichnen | - |
| Mehrere Ebenen | Komma-getrennt; Stapelung von hinten nach vorn | 2–3 Ebenen ergeben realistische Tiefe |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);Ein kurzer, dichter Schatten definiert den Kontaktpunkt, ein längerer weicher wirkt als Umgebungslicht. Dieses Muster nutzen die meisten modernen Designsysteme.
box-shadow: 0 0 24px 4px rgba(108, 140, 255, 0.45);X und Y auf 0, damit der Glow gleichmäßig strahlt. Ein kleiner positiver Spread verdickt den Glow, bevor der Blur ihn weichzeichnet. Sparsam einsetzen - farbige Glows ziehen viel Aufmerksamkeit.
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06);Inset-Schatten zeichnen innerhalb des Elements. Ein weicher Schatten wirkt wie eine Vertiefung; ein 1-px-Inset gibt eine subtile Innenkante.
box-shadow?box-shadow: x y blur spread color. X und Y sind Offsets; *Blur* weicht die Kante auf; *Spread* ändert die Größe vor dem Blur; die Farbe ist beliebige CSS-Farbe (für Deckkraft rgba()). inset ganz vorn macht den Schatten innen.box-shadow und filter: drop-shadow()?box-shadow folgt dem Rechteck des Elements und ist schnell zu zeichnen. drop-shadow() folgt dem Alphakanal (top für SVG/PNG mit Transparenz), kostet aber mehr Performance. Für Karten und Buttons box-shadow, für unregelmäßige Formen drop-shadow().transform: scale() schauen.box-shadow das Layout?overflow: visible.