Box-Shadow-Sammlung

Durchsuchen Sie 40+ fertige CSS-box-shadow-Vorlagen mit Live-Vorschau auf einem echten Kartenelement. Wählen Sie aus den Kategorien Elevation, Soft UI, farbig, Glow, Inset, mehrschichtig, scharf und minimal. Klicken Sie auf eine Vorlage, um den CSS-Wert sofort zu kopieren - ohne Anmeldung.

Box Shadow Collection

Browse 44 ready-made CSS box-shadow presets across 8 categories. Click any card or CSS value to copy it instantly. Filter by category or search by name, style, or CSS value.

Showing all 44 box-shadow presetsClick any card or CSS value to copy

Elevation XS

Elevation

Subtle 1dp lift - ideal for chips, tags, and small interactive elements.

Elevation SM

Elevation

Light 2dp card shadow - the standard for content cards and panels.

Elevation MD

Elevation

Medium 4dp shadow - great for dropdowns, popovers, and floating panels.

Elevation LG

Elevation

Prominent 8dp shadow - use for modals, dialogs, and sticky headers.

Elevation XL

Elevation

Deep 16dp shadow - for full-screen overlays and high-priority surfaces.

Elevation 2XL

Elevation

Maximum depth shadow - for hero cards and dramatic focal elements.

Soft Flat

Soft UI

Flat neumorphic surface - no depth, just a subtle pressed appearance.

Soft Raised

Soft UI

Classic neumorphic raised button - light from top-left, shadow bottom-right.

Soft Pressed

Soft UI

Neumorphic pressed/active state - inset shadows simulate a pushed-in button.

Soft Concave

Soft UI

Concave neumorphic well - for input fields and recessed containers.

Dark Soft Raised

Soft UI

Dark-mode neumorphic raised card - works on dark gray backgrounds.

Dark Soft Pressed

Soft UI

Dark-mode neumorphic pressed state - inset shadows on dark surfaces.

Indigo Glow

Colored

Indigo-tinted shadow - pairs with primary brand colors and CTA buttons.

Blue Lift

Colored

Sky-blue shadow - great for info cards, links, and interactive tiles.

Green Success

Colored

Green-tinted shadow - use for success states, badges, and confirmation cards.

Red Alert

Colored

Red-tinted shadow - for error states, destructive actions, and alert cards.

Amber Warning

Colored

Amber-tinted shadow - for warning states, caution badges, and highlight cards.

Purple Premium

Colored

Purple shadow - for premium features, pro badges, and upgrade prompts.

Pink Accent

Colored

Pink shadow - for creative tools, social features, and playful UI elements.

Inset Subtle

Inset

Subtle inset shadow - for input fields, text areas, and recessed containers.

Inset Medium

Inset

Medium inset shadow - for active/focused input states and pressed buttons.

Inset Deep

Inset

Deep inset shadow - for wells, troughs, and strongly recessed surfaces.

Inset Top Border

Inset

Inset top shadow that mimics a colored top border - for active tab indicators.

Inset Bottom Border

Inset

Inset bottom shadow - for underline-style active states and focused inputs.

Layered Soft

Layered

Three-layer soft shadow - creates a natural, photorealistic depth effect.

Layered Deep

Layered

Five-layer deep shadow - for premium cards and high-impact hero elements.

Layered Colored

Layered

Multi-layer indigo shadow - for branded cards and interactive components.

Layered Offset

Layered

Offset layered shadow - creates a stacked paper or card-deck visual effect.

White Glow

Glow

White outer glow - for dark-mode cards and highlighted elements on dark backgrounds.

Indigo Glow

Glow

Indigo neon glow - for dark-mode CTAs, active states, and focus rings.

Cyan Glow

Glow

Cyan neon glow - for tech-themed dark UIs, terminal-style elements.

Green Glow

Glow

Green neon glow - for success indicators and active status badges on dark backgrounds.

Pink Glow

Glow

Pink neon glow - for creative dark-mode UIs and vibrant accent elements.

Amber Glow

Glow

Warm amber glow - for notification badges, warning indicators, and warm dark UIs.

Sharp SM

Sharp

Small sharp shadow - for retro/pixel-art UI elements and brutalist designs.

Sharp MD

Sharp

Medium sharp shadow - for bold cards and strong visual hierarchy.

Sharp LG

Sharp

Large sharp shadow - for brutalist hero sections and high-contrast layouts.

Sharp Colored

Sharp

Colored sharp shadow - for playful, retro-styled interactive cards.

Sharp Double

Sharp

Double sharp shadow - creates a stacked offset effect for comic-book style UI.

Border Shadow

Minimal

Shadow that mimics a 1px border - use instead of border for cleaner rendering.

Focus Ring

Minimal

Accessible focus ring - use for keyboard-focused interactive elements.

Bottom Only

Minimal

Bottom-only shadow - for navigation bars, sticky headers, and tab panels.

Top Only

Minimal

Top-only shadow - for sticky footers, bottom sheets, and floating toolbars.

No Shadow

Minimal

Explicit shadow removal - use to override inherited box-shadow values.

Warum unsere Box-Shadow-Sammlung verwenden?

Sofortiges Kopieren von box-shadow-CSS: Unsere Box-Shadow-Sammlung lässt Sie jeden vordefinierten CSS-Wert mit einem Klick kopieren. Jede Karte zeigt eine Live-Vorschau des auf ein echtes Element angewendeten Schattens - kein Raten, kein manuelles Feintuning, einfach kopieren und in Ihr Projekt einfügen.
Sichere Box-Shadow-Sammlung online: Die Sammlung online läuft vollständig in Ihrem Browser. Es werden keine Daten an einen Server gesendet - Ihr Design-Workflow bleibt völlig privat und funktioniert offline, sobald die Seite geladen ist.
40+ Vorlagen in 8 Kategorien: Durchsuchen Sie Elevation-, Soft-UI- (Neumorphismus), farbige, Inset-, mehrschichtige, Glow-, scharfe und minimale Schatten. Jede Kategorie deckt ein eigenes Designmuster ab, damit Sie den richtigen box-shadow für jeden UI-Kontext finden.
100 % kostenlos - ohne Anmeldung: Nutzen Sie die Box-Shadow-Sammlung kostenlos, ohne Konto, ohne Premium-Stufe und ohne Nutzungslimits. Suchen, filtern, ansehen und kopieren Sie so viele Schatten wie nötig - völlig kostenlos für immer.

Typische Anwendungsfälle der Box-Shadow-Sammlung

Styling von UI-Karten und Panels: Wenden Sie den richtigen Elevation-Schatten auf Karten, Panels und Inhaltscontainer an. Die Sammlung bietet eine vollständige Elevation-Skala von XS bis 2XL, damit Sie zu Material Design, Tailwind oder Ihren eigenen Design-Tokens passen.
Tiefe für Buttons und CTAs: Verleihen Sie primären Buttons und Call-to-Action-Elementen Tiefe mit farbigen oder mehrschichtigen Schatten. Die Sammlung enthält farbige Schatten in Indigo, Blau, Grün und Violett, die direkt zu gängigen Markenpaletten passen.
Glow-Effekte im Dark Mode: Nutzen Sie die Vorlagen der Kategorie Glow für neonartige Akzente auf dunklem Hintergrund. Die Sammlung enthält Glow-Schatten in Weiß, Indigo, Cyan, Grün, Rosa und Amber, optimiert für UI-Oberflächen im Dark Mode.
Soft UI und Neumorphismus: Bauen Sie neumorphe Oberflächen mit den Soft-UI-Vorlagen - erhaben, gedrückt, konkav und flach für helle und dunkle Hintergründe. Die Sammlung enthält fertige Werte für die gängigsten neumorphen Muster.
Styling von Eingaben und Formularen: Nutzen Sie Inset- und minimale Schatten für Eingabefelder, Textbereiche und Formularcontainer. Die Sammlung enthält subtile Inset-Schatten, Fokusringe und randersetzende Schatten für ein barrierefreies, poliertes Formulardesign.
Dokumentation des Designsystems: Kopieren Sie Schattenwerte direkt in Ihre Design-Token-Dateien, die Tailwind-Konfiguration oder CSS-Custom-Properties. Die Sammlung bietet benannte, kategorisierte Vorlagen, die gut zu Token-Namenskonventionen passen.

Was ist ein CSS-box-shadow?

Die CSS-Eigenschaft box-shadow fügt der Box eines Elements einen oder mehrere Schatteneffekte hinzu. Jeder Schatten wird durch einen Versatz (X und Y), einen Weichzeichnungsradius, einen optionalen Ausbreitungsradius, eine Farbe und das optionale Schlüsselwort inset definiert. Mehrere Schatten können durch Kommas getrennt geschichtet werden, wodurch Tiefeneffekte von subtiler Erhebung bis zu dramatischen Glows entstehen. Unsere Box-Shadow-Sammlung bietet 40+ fertige Vorlagen, damit Sie den richtigen box-shadow-Wert finden, ohne ihn von Grund auf zu schreiben.

So funktioniert unsere Box-Shadow-Sammlung

Durchsuchen oder suchen: Nutzen Sie die Kategorie-Filterpills, um Elevation-, Soft-UI-, farbige, Inset-, mehrschichtige, Glow-, scharfe und minimale Vorlagen zu erkunden - oder tippen Sie in das Suchfeld, um einen Schatten nach Name, Kategorie oder CSS-Wert zu finden.
Live-Vorschau: Jede Karte der Sammlung zeigt ein Live-Vorschau-Element mit exakt angewendetem Schatten, sodass Sie vor dem Kopieren genau sehen, wie er aussieht.
Kopieren und verwenden: Klicken Sie auf die Kopierschaltfläche einer Karte, um die vollständige Deklaration box-shadow: …; zu kopieren, oder klicken Sie direkt auf den CSS-Wert, um nur den Wert zu kopieren. Fügen Sie ihn in Ihr CSS, Ihre Tailwind-Konfiguration oder Ihre Design-Token-Datei ein.

Was die Box-Shadow-Sammlung abdeckt

Elevation-Skala: Schatten von XS bis 2XL nach den Elevation-Konventionen von Material Design und Tailwind für eine konsistente Tiefenhierarchie.
Soft UI / Neumorphismus: erhabene, gedrückte, konkave und flache neumorphe Schatten für helle und dunkle Hintergründe.
Farbig und Glow: markenfarbige Schatten und Neon-Glow-Effekte für Dark-Mode-UIs, CTAs und Statusanzeigen.
Inset, scharf und minimal: Inset-Schatten für Formularfelder, scharfe Schatten für brutalistische Designs und minimale Schatten für Ränder und Fokusringe.

Browser-Unterstützung & Datenschutz

Die Eigenschaft box-shadow wird von allen modernen Browsern unterstützt, und zwar seit IE9. Mehrschichtige Schatten (kommagetrennt) sind ebenso gut unterstützt. Das gesamte Durchsuchen, Suchen und Kopieren der Box-Shadow-Sammlung läuft lokal in Ihrem Browser - es werden nie Daten an einen Server gesendet.

Häufig gestellte Fragen

Eine CSS-Box-Shadow-Sammlung ist eine kuratierte Bibliothek fertiger box-shadow-CSS-Werte mit Live-Vorschauen. Durchsuchen Sie Vorlagen nach Kategorie, sehen Sie, wie jede Schatten auf einem echten Element aussieht, und kopieren Sie den CSS-Wert mit einem Klick.

Die Sammlung umfasst 8 Kategorien: Elevation, Soft UI (Neumorphismus), farbig, Inset, mehrschichtig, Glow, scharf und minimal - insgesamt 40+ Vorlagen.

Klicken Sie auf das Kopiersymbol einer Karte, um die vollständige Deklaration box-shadow: …; zu kopieren, oder klicken Sie auf den CSS-Wert-Text, um nur den Wert zu kopieren.

Ja. Die Box-Shadow-Sammlung online läuft vollständig in Ihrem Browser. Es werden nie Daten an einen Server gesendet.

Ja. Kopieren Sie einen Wert und fügen Sie ihn in Ihrer tailwind.config.js unter theme.extend.boxShadow hinzu. Die Werte sind auch mit CSS-Custom-Properties und CSS-in-JS kompatibel.

Neumorphe Schatten nutzen zwei Schatten - einen hellen und einen dunklen -, um eine Oberfläche zu simulieren, die aus dem Hintergrund hervorsteht oder sich hineindrückt. Die Sammlung enthält erhabene, gedrückte, konkave und flache Varianten.

Ja. Die Box-Shadow-Sammlung ist 100 % kostenlos, ohne Anmeldung, ohne Premium-Stufe und ohne Nutzungslimits.