CSS-Schattenpalette & Elevation
Design-Systeme & Tailwind Elevations-Engine

CSS Layered Box Shadow Palette & Elevations-Generator

Erstellen Sie weiche, moderne mehrschichtige Box-Shadows mit benutzerdefinierten Elevationsstufen, Umgebungslichtstreuung, farbigen Schattierungen und Tailwind-Klassen.

100% Client-Seitige Privatsphäre
W3C CSS & DTCG-konform
Voreinstellungen:
Schattenphysik & Elevations-Engine
Elevations-Stufe prüfenAlle 6 Stufen sichtbar
4 Ebenen
2 (Schnell)4 (Ausgewogen)6 (Ultra-Glatt)
90°
0° Rechts90° Tageslicht180° Links270° Unterlicht
40px
16px (Subtil)40px (Standard)80px (Dramatisch)
1.5x
0.5x (Scharf)1.5x (Natürlich)3.0x (Diffuser Glow)
-2px
-8px (Ultra-Klar)-2px (Modernes SaaS)+4px (Ton-Ausdehnung)
16%
5% (Subtil)16% (Standard)50% (Hoher Kontrast)
#0F172A
Umgebungslicht-Balance45%
Fokussiertes SchlüssellichtDiffuses Umgebungsleuchten
Stufen: 6•Mikro-Ebenen: 24•Azimut: 90°
#0f172a (16%)
Leinwand:
Form:
xs3px Auftrieb

Mikro-Elevation

Subtile Ränder, Badge-Akzente und Tabellenzeilen-Hervorhebungen

4 Ebenen
sm8px Auftrieb

Ruhezustand

Schaltflächen, Formularfelder und Standard-Karten

4 Ebenen
md14px Auftrieb

Interaktiver Auftrieb

Hover-Zustände, schwebende Tooltips und aktive Oberflächenpanels

4 Ebenen
lg22px Auftrieb

Schwebendes Element

Dropdown-Menüs, Auswahl-Overlays und schwebende Aktionsschaltflächen

4 Ebenen
xl30px Auftrieb

Overlay-Modal

Dialoge, ausfahrbare Schubladen und kritische Benachrichtigungen

4 Ebenen
2xl40px Auftrieb

Hero-Schwebend

Splash-Dialoge, Lightbox-Galerien und Modale oberster Ebene

4 Ebenen
Format: preview•1529 Bytes
Standards: CSS Spezifikation Level 3 • WebKit / Blink / Gecko
Elevations-Hierarchie
6 Diskrete Stufen
24 Berechnete Mikro-Ebenen gesamt
Lichtvektor & Unschärfe
Azimut: 90° • 1.5x Diffusion
Streuungs-Versatz -2px • Abfall-Exp 1.5
Design-Token Export
Tailwind & DTCG einsatzbereit
Kein Banding • 100% Browser-AST

100% Client-Seitige Physik-Simulation

Mathematische Lichtvektor-Projektion und exponentielle Weichzeichnungs-Berechnungen laufen komplett lokal im Browser ab.

Banding-freie Mehrschicht-Verläufe

Verwandelt harte Einzelschatten in weiche mehrstufige Verläufe mit negativer Streuung für gestochen scharfe Kanten.

Universelle Design-System-Tokens

Erzeugt schlüsselfertige Elevations-Tokens für Tailwind CSS v3/v4, CSS-Variablen und Style Dictionary JSON.

Technische Referenz & Architektur-Leitfaden

CSS Mehrschichtige Box-Shadow-Palette & Elevations-Generator Entwickler-Handbuch — Referenz-Leitfaden

Erstellen Sie weiche, moderne mehrschichtige Box-Shadows mit benutzerdefinierten Elevationsstufen, Umgebungslichtstreuung, farbigen Schattierungen und Tailwind-Klassen.

Wichtige Parameter & Steuerelemente

layersnumber

Gesamtzahl der Schattenebenen (üblicherweise 2 bis 6), die übereinandergelegt werden, um realistische Lichtdiffusion und Halbschatten abzubilden.

Standard: 4
elevationnumber | string

Virtueller Z-Ebenen-Abstand von der Oberfläche; bestimmt den Skalierungsfaktor für Y-Versatz und Unschärferadius aller Schichten.

Standard: 16px
shadowColorstring (hex | rgba | hsl)

Basisfarbe und Deckkraft für diffuse und gerichtete Schattenschichten. Unterstützt getönte Farbnuancen abgestimmt auf das Designsystem.

Standard: rgba(15, 23, 42, 0.08)
spreadnumber (px)

Ausdehnungsradius (Spread), der schrittweise angepasst wird, um die Kontur der einzelnen Schichten im Verhältnis zur Box zu steuern.

Standard: -2px
diffusionCurvestring (linear | exponential | custom-ease)

Mathematische Progressionskurve zur Steuerung des exponentiellen Anstiegs des Unschärferadius und des Alpha-Zerfalls aufeinanderfolgender Schichten.

Standard: exponential

Profi-Tipps & Best Practices

Verwenden Sie auf hellen oder bunten

Verwenden Sie auf hellen oder bunten Hintergründen niemals reines Schwarz 'rgba(0, 0, 0, 0.2)'. Mischen Sie Schatten mit der Umgebungsfarbe ab – z. B. Schieferblau 'rgba(15, 23, 42, 0.08)' –, um brillante, lebensechte Tiefe zu erzeugen.

Kombinieren Sie eine dichte

Kombinieren Sie eine dichte, scharfe Ebene mit geringem Unschärferadius für den Oberflächenkontakt mit 3 bis 4 weit gestreuten, hochtransparenten Schichten für die Umgebungsokklusion, um harte Kunstkanten zu vermeiden.

Das direkte Animieren der Eigenschaft

Das direkte Animieren der Eigenschaft 'box-shadow' erzwingt bei jedem Frame ein CPU-Repaint. Platzieren Sie Schatten höherer Elevation auf einem '::after'-Pseudoelement und animieren Sie lediglich dessen 'opacity' GPU-beschleunigt.

Elevationsarchitektur im Dark Mode

Auf dunklen Oberflächen erzeugen dunkle Schatten kaum Kontrast. Befolgen Sie die Material-Design-Richtlinien: Erhöhen Sie die Helligkeit der Komponenten-Oberfläche (Surface-Ebenen) und nutzen Sie feine, getönte Lichtschein-Schatten.

Häufige Fallstricke & Fehlerbehebung

Sichtbare Streifenbildung (Banding) und harte Übergänge zwischen den Schattenebenen

Erhöhen Sie die Anzahl der Ebenen auf 4 oder 5 und verringern Sie die Alpha-Schrittweiten. Verteilen Sie die Blur-Werte exponentiell (z. B. 1px, 3px, 8px, 18px, 36px) statt linear für einen nahtlosen Gradienten.

Schatten werden an den Rändern des übergeordneten Containers abgeschnitten

Übergeordnete Elemente mit 'overflow: hidden' schneiden ausladende Schatten ab. Nutzen Sie stattdessen 'overflow: clip' mit ausreichendem Innenabstand (Padding) oder lagern Sie den Schatten auf ein Kind-Element aus.

Ruckeln und spürbare Frame-Einbrüche beim schnellen Scrollen großer Listen

Zu viele gleichzeitige Multi-Layer-Schatten auf wiederkehrenden Listenelementen belasten den Browser-Rasterizer. Begrenzen Sie Karten auf 2 bis 3 Schichten und reservieren Sie 5+ Ebenen für Dialoge, Modals und Popover.

Häufig gestellte Fragen (FAQ)

Warum sind gestapelte Multi-Layer-Schatten gewöhnlichen Einzelschatten überlegen?▼

Natürliche Lichtquellen erzeugen niemals eine gleichförmige Unschärfe. Ein realer Schatten besteht aus einem dichten Kern und einer weich gestreuten Randzone. Einzelne CSS-Schatten wirken künstlich und verwaschen, während 3 bis 6 gestapelte Schichten den optischen quadratischen Lichtabfall physikalisch präzise nachbilden.

Wie binde ich die erzeugten Schattenpaletten sauber in Tailwind CSS ein?▼

Fügen Sie die generierte komma-separierte Schatten-Zeichenkette in der 'tailwind.config.js' unter 'theme.extend.boxShadow' ein oder hinterlegen Sie CSS-Variablen wie '--elevation-3' in Ihrem globalen Stylesheet und nutzen Sie die Klasse 'shadow-[var(--elevation-3)]'.

Beeinträchtigen mehrere Schattenebenen die Rendering-Geschwindigkeit des Browsers?▼

Bei statischen Elementen rastert der Browser den Schatten einmalig in die Compositing-Ebene, weshalb die Belastung minimal ist. Einbußen entstehen primär bei kontinuierlichen Layout-Animationen, was sich durch Pseudoelement-Opacity-Tweaks umgehen lässt.

Wie sollte eine standardisierte Elevations-Hierarchie im Design-System aufgebaut sein?▼

Definieren Sie semantische Elevationsstufen (z. B. 'elevation-low' für Buttons, 'elevation-mid' für Karten, 'elevation-high' für Dropdowns und 'elevation-modal' für Overlays). Behalten Sie Lichtwinkel und Grundtönung stets konsistent bei.

Verwandte Werkzeuge & Dienstprogramme

Alle Werkzeuge →
CSS-Gradient Entwickler-Referenz & Syntax-GuideDesign

Vollständige technische Referenz für lineare, radiale und konische CSS-Verläufe. Behandelt Doppelpositionen, Interpolation im OKLCH-Farbraum, Text-Masking und Tailwind CSS-Export.

Werkzeug öffnen→
SVG Optimizer Entwickler-ReferenzDesign

Clientseitiges SVG-Optimierungswerkzeug zur XML-Minifizierung, Pfadpräzisionsanpassung, Metadaten-Bereinigung und XSS-Sanitisierung.

Werkzeug öffnen→
Farbpaletten-EntwicklerreferenzDesign

Entwicklerwerkzeug zur Farbpalettengenerierung, WCAG-Kontrastanalyse, CVD-Barrierefreiheitssimulation und für Design-Token-Exporte.

Werkzeug öffnen→
CSS Glassmorphism Entwickler-ReferenzDesign

Entwickler-Werkzeug und Referenz für CSS-Glassmorphism, Backdrop-Filter, Reflexionskanten und GPU-beschleunigte Milchglas-Oberflächen.

Werkzeug öffnen→
Seitenverhältnis-Rechner Entwickler-ReferenzDesign

Entwickler-Werkzeug zur Berechnung von Pixel-Seitenverhältnissen, Skalierung von Bildauflösungen, lokaler Medieninspektion und Video-Codec-Ausrichtung.

Werkzeug öffnen→
Favicon & App-Icon Generator CheatsheetDesign

Technisches Handbuch zur Erstellung von plattformübergreifenden Browser-Favicons, Apple Touch Icons, PWA-Web-Manifesten und HTML-Tags.

Werkzeug öffnen→