CSS Box-Shadow-Generator

CSS Box-Shadow-Generator & Schatten

Erstellen Sie fotorealistische Mehrschicht-CSS-Box-Shadows und weiche Elevation. Konfigurieren Sie Versatz, Unschärfe, Ausbreitung sowie Inset-Schatten und exportieren Sie CSS- oder Tailwind-Tokens.

Schnellauswahl

Harmonische Tiefenstaffelung

Lichteinfallswinkel (90°)
Lichtwinkel-Presets
Ebenenanzahl:
Distanz / Höhe50px
Max. Unschärfe80px
Ausbreitung-5px
Deckkraft25%
Kontaktschatten-Verhältnis60%
Farbtönung (Chroma)Neutral
Subpixel-Feinkante (1px)
DämpfungskurveKubisch (Cubic)
Ebenenstapel-Status: 6 / 6 EbenenLokale Client-Sandbox
Ziel:
Hintergrundfarbe:
Profi-KomponenteSample card version

SaaS Dashboard-Karte

Design-System-Komponente mit weichem physikalischem Mehrschicht-Schatten.

29 € / Monat
Rendering-Performance:Hohe GPU-Last(180px Gesamter Blur-Kernel)
Aktive Ebenen: 6 / 6|Lokale Client-Sandbox
Aktive Ebenen
6 / Max layers count
Schichtentiefe
Gesamte Unschärfe
180px
Kumulierte Unschärfe
Rasterisierungs-Bewertung
60 FPS GPU-Last optimal
GPU-Lastabschätzung

Client-seitige Verarbeitung

Hochperformante Schattenberechnung direkt im lokalen Arbeitsspeicher des Browsers.

Null Serverübertragung & Datenschutz

Sämtliche Nutzlasten verbleiben strikt lokal ohne externe Serverkommunikation.

Produktionsbereiter Export

Saubere, optimierte Ausgabeformate für die unmittelbare produktive Bereitstellung.

ToolsAA•100% Client-seitige private Web-Dienstprogramme
Technische Referenz & Architektur-Leitfaden

CSS Box-Shadow Generator & Schatten — Referenzhandbuch

Generieren Sie mehrstufige CSS-Box-Shadows und realistische Tiefeneffekte. Konfigurieren Sie Versatz, Unschärfe, Ausbreitung und Inset mit sauberem CSS- oder Tailwind-Export.

CSS Box-Shadow Generator & Schatten — Referenzhandbuch — Client-seitige In-Memory-Architektur und Datenfluss
CSS Box-Shadow Generator & Schatten — Referenzhandbuch — Client-seitige In-Memory-Architektur und Datenfluss

Wichtige Parameter & Einstellungen

offset-x (Horizontale Verschiebung)Länge (px)

Bestimmt die horizontale kartesische Verschiebung des Schattens relativ zur Elementbox. Positive Werte werfen den Schatten nach rechts, negative Werte nach links. In mehrschichtigen Beleuchtungsmodellen berechnet sich offset-x aus dx = distance * cos(theta), wobei theta den Einfallswinkel der Lichtquelle darstellt.

Standard: 0px
offset-y (Vertikale Verschiebung)Länge (px)

Definiert die vertikale kartesische Verschiebung des Schattens. Positive Werte projizieren den Schatten nach unten (entsprechend natürlichem Deckenlicht oder Sonnenstand von oben), negative Werte nach oben. Physikalische Tiefenmodelle skalieren offset-y proportional zur wahrgenommenen Z-Achsen-Erhebung.

Standard: 4px
blur-radius (Gaußsche Unschärfe)Länge (px)

Bestimmt die Standardabweichung des Gaußschen Weichzeichnungsfilters am Schattenrand (sigma = blur / 2). Ein Unschärferadius von 0 erzeugt eine gestochen scharfe Silhouette, während höhere Werte einen diffusen Halbschatten (Penumbra) bewirken. Werte über 64px können auf leistungsschwachen Mobilgeräten zu GPU-Rasterisierungsengpässen führen.

Standard: 12px
spread-radius (Geometrische Ausdehnung / Kontraktion)Länge (px)

Vergrößert oder verkleinert die Schattengeometrie in alle vier Richtungen vor der Gaußschen Weichzeichnung. Positive Werte dehnen den Schatten nach außen aus; negative Werte ziehen ihn nach innen zusammen. Dies ist eine entscheidende Technik bei Mehrfachschatten, um seitliches Ausfransen zu verhindern und gleichzeitig eine prägnante vertikale Tiefenwirkung zu wahren.

Standard: -2px
color & alpha (Farbton & Deckkraft)Farbe (HEX / RGBA / OKLCH)

Legt die spektrale Farbe und Deckkraft des Schattens fest. Reines Schwarz (rgba(0, 0, 0, alpha)) erzeugt auf farbigen Untergründen oft unschöne, matschig-graue Übergangsränder. Professionelle Design-Tokens verwenden getönte Farbwerte (z. B. tiefes Dunkelblau für kühle oder warmes Umbra für warme Oberflächen) mit kalibrierten Alpha-Werten zwischen 4 % und 25 %.

Standard: rgba(0, 0, 0, 0.08)
inset (Innenliegender Schatten)Schlüsselwort-Flag

Invertiert den Projektionsvektor, sodass der Schatten innerhalb der border-box des Elements gezeichnet wird statt nach außen zu fallen. Inset-Schatten simulieren vertiefte Mulden, konkave Prägungen, innere Fase-Highlights sowie gedrückte Button-Zustände und werden exakt an der border-radius-Kurve des Elements beschnitten.

Standard: false (äußerer Schatten)
harmonic falloff curve (Harmonische Dämpfungskurve)Mathematischer Exponent (k)

Der polynomielle oder exponentielle Potenzgesetz-Exponent (typischerweise k = 1,8 bis 2,4), der bestimmt, wie Versatz, Gaußscher Weichzeichnungsradius und Alpha-Deckkraft über aufeinanderfolgende Schichten skalieren. Dies verhindert unnatürliche lineare Abstufungen und simuliert das physikalische Abstandsgesetz (Inverse-Square Law) realer Lichtstreuung.

Standard: 2.0 (quadratisch)

Profi-Tipps & Best Practices

Negativer Ausbreitungsradius verhindert seitliches Überlappen bei Cards

Bei großen vertikalen Schatten (z. B. offset-y: 20px, blur: 25px) dringt die Gaußsche Unschärfe unweigerlich horizontal nach links und rechts hervor, wodurch ein klobiger, kissenartiger Eindruck entsteht. Ein negativer Ausbreitungsradius (spread-radius) von etwa 20 % bis 40 % des vertikalen Versatzes (z. B. spread: -6px) zieht die Flanken nach innen, behält die kräftige Erdung nach unten bei und sorgt für saubere, präzise Tiefenstaffelung.

Pseudo-Element-Deckkraft statt box-shadow animieren für stabile 60/120 fps

Das direkte Animieren oder Transitionieren der Eigenschaft box-shadow zwingt die Browser-Rendering-Engine, auf jedem Frame aufwendige Gaußsche Weichzeichnungsmatrizen in den Paint-Layern neu zu rastern. Dies führt bei Hover-Effekten zu Rucklern und Frame-Drops. Rendern Sie stattdessen den verstärkten Schatten auf einem ::after-Pseudoelement mit opacity: 0 und will-change: opacity vor. Animieren Sie beim Hover lediglich opacity: 1 sowie ein hardwarebeschleunigtes transform: translateY(-2px), um butterweiche 120-fps-Animationen rein über den GPU-Compositor zu erzielen.

Farbgetönte Schatten gegen matschig-graue Ränder auf Buntflächen

Neutrale schwarze Schatten (rgba(0, 0, 0, 0.15)) auf farbigen Untergründen wie Bernstein, Smaragdgrün oder Saphirblau wirken am Unschärferand oft schmutzig und entsättigt, da das sRGB-Blending die Chromatizität mindert. Für plastische und brillante Tiefenwirkung sollte der Schatten-Farbton aus dem Hintergrund abgeleitet werden: Drehen Sie den Farbwert (Hue) um 10° bis 20° in Richtung eines kühleren Tons, heben Sie die Sättigung um 15 % an und senken Sie die Helligkeit auf 8 % bis 15 %.

Häufige Fehlerquellen & Fehlerbehebung

⚠️Box-Shadow wird an den Elementrändern abgeschnitten oder ist unsichtbar

Besitzt ein übergeordnetes Elternelement die Deklaration overflow: hidden oder overflow: auto, wird jeder Schatten, der über die Bounding-Box hinausragt, unverzüglich abgeschnitten. Lösen Sie dies, indem Sie dem übergeordneten Container ausreichend Padding spendieren (mindestens die Summe aus blur und offset-y), overflow: hidden entfernen oder den Schatten auf ein isoliertes Wrapper-Element außerhalb des Scroll-Containers anwenden.

⚠️Mehrschichtige Schatten verursachen Frame-Drops und hohe GPU-Speicherlast beim Scrollen

Das Stapeln von mehr als sechs komplexen Schatten-Layern mit Unschärferadien über 60px beansprucht enorm viel GPU-Tile-Cache-Speicher – insbesondere auf hochauflösenden Retina-Displays. Reduzieren Sie die Anzahl auf 3 bis 4 harmonisch abgestimmte Ebenen, begrenzen Sie den maximalen Unschärfewert auf 40px und fügen Sie contain: paint oder will-change: transform hinzu, um das Element auf eine eigenständige Hardware-Compositing-Ebene auszulagern.

⚠️Treppeneffekte oder unsaubere Antialiasing-Kanten an abgerundeten Ecken in Safari WebKit

WebKit weist einen dokumentierten Subpixel-Antialiasing-Bug bei der Kombination von äußerem border-radius und inset-Box-Shadows auf. Beheben Sie dies durch explizites Setzen von -webkit-mask-image: -webkit-radial-gradient(white, black), Hinzufügen von transform: translateZ(0) und die Verwendung ganzzahliger Pixelwerte für border-radius anstelle gebrochener rem-Dezimalwerte.

⚠️Box-Shadow passt sich nicht der transparenten Silhouette eines PNG- oder SVG-Icons an

Die CSS-Eigenschaft box-shadow berechnet die Projektion strikt entlang der rechteckigen border-box sowie der border-radius-Krümmung und ignoriert transparente Pixel im Inneren vollständig. Um Schatten exakt an Freistellern transparenter PNGs oder komplexen SVG-Pfaden auszurichten, ersetzen Sie box-shadow durch CSS filter: drop-shadow(x y blur color). Beachten Sie, dass filter: drop-shadow weder spread- noch inset-Parameter unterstützt.

Häufig gestellte Fragen (FAQ)

Warum wirken mehrschichtige CSS-Box-Shadows realistischer als einschichtige Schatten?▼

Einschichtige CSS-Box-Shadows basieren auf einer gleichmäßigen linearen Gaußschen Unschärfe, die reale physikalische Lichtbrechung nicht adäquat abbildet. In der Natur wirft ein beleuchtetes Objekt zwei charakteristische Zonen: eine dunkle, scharfe Kontaktschatten-Zone (Kernschatten / Umbra / Ambient Occlusion) direkt an der Standfläche und einen breiten, weichen Halbschatten (Penumbra), der nach außen diffus verläuft. Durch das Schichten von 3 bis 6 Box-Shadow-Ebenen mit exponentiellen Dämpfungskurven für Abstand und Weichzeichnung (z. B. y_i = d * (i/n)^2,2, blur_i = b * (i/n)^2,0, alpha_i = alpha_max * e^(-0,6i)) werden sowohl Kontaktschatten als auch volumetrische Lichtstreuung naturgetreu nachempfunden.

Was ist der Unterschied zwischen CSS box-shadow und filter: drop-shadow()?▼

CSS box-shadow bezieht sich ausschließlich auf die rechteckige border-box eines Elements (inklusive border-radius) und ignoriert Alphakanal-Transparenzen im Inneren. filter: drop-shadow() hingegen wertet die tatsächliche Alpha-Maske aller gerenderten Pixel aus und wirft Schatten entlang transparenter PNG-Konturen, Inline-SVG-Vektorpfade oder CSS-clip-path-Formen. Allerdings unterstützt filter: drop-shadow() weder einen spread-radius noch das Schlüsselwort inset und erzeugt bei Mehrfachschichten einen höheren GPU-Compositing-Overhead.

Wie verhindert man unschöne, graue Schattensäume auf farbigen Hintergründen?▼

Rein schwarze Schatten (rgba(0, 0, 0, 0.15)) auf bunten Untergründen erzeugen schmutzige, graue Ränder, da das sRGB-Alphablending die Farbsättigung des Hintergrunds mindert. Für brillante und lebendige Schatten ermittelt man den Farbton (Hue) des Hintergrunds, verschiebt ihn um 10° bis 20° zu einer tieferen Nuance (z. B. Orange in Richtung eines dunklen Rötlich-Umbra, Blau zu tiefem Mitternachtsblau), erhöht die Sättigung um 15 % bis 30 % und reduziert die Helligkeit auf 10 % bis 20 %. In modernem CSS lässt sich dies elegant mit color-mix(in oklch, var(--bg-color), black 80%) automatisieren.

Wie optimiert man CSS-Box-Shadows für 60-fps-Animationen ohne GPU-Lags?▼

Animieren Sie niemals die box-shadow-Eigenschaft direkt. Dies zwingt Browser-Engine und GPU dazu, rechenintensive Gaußsche Filtermatrizen auf jedem Einzelbild neu zu rastern (was teure Paint- und Composite-Phasen auslöst). Erstellen Sie stattdessen ein persistentes ::after-Pseudoelement mit dem vorgerenderten Zielschatten, setzen Sie dessen Ausgangs-opacity auf 0 und animieren Sie bei :hover oder :focus lediglich opacity sowie transform: translateY(-2px). Da opacity und transform isoliert auf dem GPU-Compositor-Thread laufen, laufen Animationen selbst auf mobilen Geräten mit absolut stabilen 60/120 fps ohne Frame-Drops.

Wie sieht eine ideale Box-Shadow-Tiefenskala (Elevation) für Design-Systeme aus?▼

Etablierte Design-Systeme (wie Material Design, Tailwind CSS oder Apple HIG) gliedern Schatten in eine 5- bis 6-stufige Z-Achsen-Tiefenskala: Stufe 1 (Card/Button im Ruhezustand: 1–2px Y-Versatz, 3–4px Unschärfe, 5–8 % Deckkraft für subtile Trennung), Stufe 2 (Card-Hover/Erhobener Button: 4–6px Y-Versatz, 8–12px Unschärfe, 10–12 % Deckkraft), Stufe 3 (Dropdown-Menü/Popover: 8–12px Y-Versatz, 16–24px Unschärfe, 12–15 % Deckkraft), Stufe 4 (Modaler Dialog/Drawer: 16–24px Y-Versatz, 32–48px Unschärfe, 15–20 % Deckkraft) und Stufe 5 (Toast/Systemhinweis: 24–32px Y-Versatz, 48–64px Unschärfe, 20–25 % Deckkraft mit atmosphärischem Umgebungsschein).

Beeinflusst CSS box-shadow das Seitenlayout oder löst es Reflows aus?▼

Nein, box-shadow beeinflusst das Dokumentenlayout nicht, vergrößert die Bounding-Box der Elementgeometrie nicht und löst beim Einblenden oder Verändern keinerlei DOM-Reflows oder Layout-Neuberechnungen aus. Da Schatten jedoch außerhalb des Box-Modells gerendert werden, können sehr große Unschärfe- oder Ausbreitungsradien benachbarte Elemente überdecken und unerwünschte horizontale Scrollbalken erzeugen, sofern sie über die Viewport-Grenzen hinausreichen und nicht durch overflow: hidden abgefangen werden.

Verwandte Tools & Hilfsprogramme

Alle Tools →
CSS Clip-Path Generator & FormenDesign

Erstellen Sie individuelle CSS-clip-path-Polygone mit interaktiven Anfassern. Kopieren Sie browserübergreifenden CSS-Code, SVG-Pfade und responsive Prozentkoordinaten.

Tool öffnen→
Farbpalette aus Bild & FarbschemaDesign

Farbpaletten sofort aus Bildern extrahieren. Dominante HEX-, RGB- und HSL-Farbfelder generieren, CSS- oder Tailwind-Tokens exportieren und WCAG-Barrierefreiheit auf Kontrast prüfen.

Tool öffnen→
Goldener Schnitt Rechner & RechteckDesign

Berechnen Sie Maße im Goldenen Schnitt und Proportionen des Goldenen Rechtecks sofort. Längen nach Phi (1,618) teilen, Typografie skalieren und responsive Raster erstellen.

Tool öffnen→
CSS Neumorphismus Generator & Soft UIDesign

Erstellen Sie erhabene, vertiefte und flache Soft-UI-Schatten mit dem Neumorphismus-Generator. Kopieren Sie sauberen CSS-, Tailwind- und SCSS-Code mit optischer Lichtfeld-Vorschau in Echtzeit.

Tool öffnen→
Farbpaletten-Generator & HarmonienDesign

Harmonische Farbschemata und Paletten direkt berechnen. Komplementäre, analoge, triadische und Split-Paletten mit WCAG-Kontrastprüfung in Echtzeit und CSS-Export erstellen.

Tool öffnen→
CSS Glassmorphism Generator & MilchglasDesign

Modernen CSS-Glassmorphism- & Milchglas-Code mit Live-Reglern für backdrop-filter, Unschärfe, Deckkraft und Schatten erzeugen. Reines HTML & CSS sofort kopieren.

Tool öffnen→