CSS Box-Shadow Generator

CSS Box-Shadow Generator – Professionelle Schlagschatten für dein Webdesign

Kein CSS-Effekt verleiht einem Element so viel Tiefe, Eleganz und Persönlichkeit wie ein gut gesetzter Box-Shadow. Von der minimalen Erhebung einer Karte bis zum dramatischen Drop-Shadow eines Modals — CSS-Schatten sind aus modernem Webdesign nicht wegzudenken. In Kombination mit anderen visuellen Werkzeugen wie dem CSS Gradient Generator oder dem Border-Radius Generator kannst du beeindruckende UI-Komponenten aufbauen, ohne ein einziges Designprogramm zu öffnen.

Mit unserem kostenlosen CSS Box-Shadow Generator erstellst du komplexe Schatten-Effekte visuell in Echtzeit, ohne eine Zeile Code zu schreiben. Alle Parameter sind per Slider und Farbwähler einstellbar, das Ergebnis wird sofort als fertiger CSS-Code ausgegeben — bereit zum Kopieren.

Was ist CSS box-shadow? Syntax vollständig erklärt

Die CSS-Eigenschaft box-shadow fügt einem HTML-Element einen oder mehrere Schlagschatten hinzu. Die vollständige Syntax lautet:

Jeder Parameter hat eine spezifische Funktion:

• inset (optional): Wandelt den Außenschatten in einen Innenschatten um. Ohne dieses Keyword liegt der Schatten außerhalb des Elements.
• offset-x: Horizontale Verschiebung. Positive Werte verschieben nach rechts, negative nach links. 0 zentriert den Schatten horizontal.
• offset-y: Vertikale Verschiebung. Positive Werte verschieben nach unten (Lichtquelle oben), negative nach oben.
• blur-radius: Unschärfe des Schattens. 0 ergibt einen harten Schatten. Höhere Werte erzeugen einen weicheren, ausgedehnteren Schatten.
• spread-radius: Ausdehnung nach außen. Positive Werte lassen den Schatten wachsen, negative lassen ihn schrumpfen — nützlich für elegante "Tiefe"-Effekte.
• color: Farbe des Schattens. rgba()-Werte erlauben Transparenz und sind für professionelle Designs unerlässlich.

So nutzt du den Box-Shadow Generator — Schritt für Schritt

Der Generator ist so intuitiv wie möglich gestaltet. Hier ist der vollständige Workflow, der dich in unter zwei Minuten zu einem professionellen Ergebnis bringt:

1. Schatten einrichten: Passe Horizontal-Offset, Vertikal-Offset, Unschärfe, Ausbreitung, Farbe und Deckkraft über die Schieberegler an. Jede Änderung aktualisiert die Vorschau in Echtzeit.
2. Inset-Option: Aktiviere das „Inset"-Häkchen für einen Innenschatten — ideal für gedrückte Buttons oder eingesenkte Formularfelder.
3. Mehrere Ebenen: Klicke auf „Weitere Schatten-Ebene hinzufügen" für mehrschichtige Schatten-Effekte. Jede Ebene kann einzeln deaktiviert oder gelöscht werden.
4. Vorlagen nutzen: Die 8 vorgefertigten Presets sind sofort einsatzbereit — ideal als Startpunkt für dein eigenes Design.
5. Vorschau-Hintergrund wechseln: Teste deinen Schatten auf verschiedenen Hintergrundfarben, um sicherzustellen, dass er überall gut aussieht.
6. Code kopieren: Klicke auf „CSS kopieren" und füge den fertigen Code direkt in dein Stylesheet, dein React-Projekt oder deinen Tailwind-Config ein.

Das Ergebnis des Generators ist vollständig browserkompatibel und benötigt keine Vendor-Präfixe. Du kannst den generierten Code direkt in jedem modernen CSS-Framework wie Tailwind, Bootstrap oder in purem CSS verwenden.

Browser-Kompatibilität von CSS box-shadow

box-shadow gehört zu den am besten unterstützten CSS-Eigenschaften überhaupt — ohne Vendor-Präfixe, ohne Polyfills, ohne Einschränkungen. Das folgende Diagramm zeigt die Unterstützung der wichtigsten Browser:

Moderne Projekte können box-shadow ohne jegliche Vendor-Präfixe (-webkit-, -moz-) verwenden. Die alten Präfixe werden von modernen Browsern ignoriert und verlangsamen nur die CSS-Parsing-Geschwindigkeit. Für Projekte, bei denen der IE9-Support noch eine Rolle spielt, beachte: inset und mehrere Schatten-Ebenen werden dort nicht vollständig unterstützt.

Die 5 wichtigsten Box-Shadow-Patterns im modernen Webdesign

Es gibt nicht "den einen" richtigen Schatten. Je nach Kontext, Designsystem und Zielgruppe eignen sich unterschiedliche Ansätze. Hier sind die fünf dominierenden Patterns — jedes mit eigenem Charakter, Einsatzgebiet und einem interaktiven Beispiel, das du direkt über den Generator erzeugen kannst.

1. Soft Shadow – Modernes, subtiles Design

Der Soft Shadow ist das Signature-Element von Material Design und modernen Design-Systemen. Er verwendet eine oder zwei Ebenen mit niedriger Deckkraft und hohem Blur-Radius. Diese Art von Schatten ist bewusst unauffällig — er hebt Elemente vom Hintergrund ab, ohne dabei die Aufmerksamkeit auf sich selbst zu lenken. Wenn du dein Farbsystem verfeinern willst, hilft dir der Farb-Konverter, die perfekte rgba-Schattenfarbe zu berechnen.

box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);

2. Hard Shadow – Brutalistischer Retro-Look

Kein Blur, klare Konturschatten — der Hard Shadow erlebt im Neobrutalism-Trend ein starkes Comeback. Das Prinzip ist maximal simpel, aber extrem ausdrucksstark. Wichtig ist, dass die Schatten-Farbe und der Elementrahmen exakt aufeinander abgestimmt sind. Für die richtige Farbabstimmung empfiehlt sich der Farbkontrast-Checker, der sicherstellt, dass das Element auch barrierefrei bleibt.

box-shadow: 4px 4px 0px #000000;

3. Inset Shadow – Tiefe von innen

Mit inset wirkt das Element eingedrückt oder eingebettet — als wäre es in den Hintergrund eingelassen. Dieses Pattern ist besonders wertvoll für interaktive Elemente: Ein Button, der beim Klicken von einem erhobenen in einen eingedrückten Zustand wechselt, signalisiert dem Nutzer visuell die Interaktion. Außerdem ist Inset-Shadow das zentrale Werkzeug im Neumorphism-Design.

box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);

4. Mehrschichtiger Schatten – Photoreal und elegant

Echte Schatten in der Physik sind nie gleichmäßig. Sie bestehen aus einer kurzen, dichten Schicht direkt am Element (Kontaktschatten) und einer weiteren, diffusen Schicht, die sich weit ausbreitet (Atmosphärenschatten). Diese Kombination macht CSS-Schatten deutlich glaubwürdiger und edler. Das Prinzip stammt aus der Fotografie und wird im Design-System von Figma konsequent eingesetzt.

box-shadow:
  0 1px 3px rgba(0,0,0,0.12),
  0 4px 12px rgba(0,0,0,0.08),
  0 16px 40px rgba(0,0,0,0.05);

5. Farbiger Schatten – Glow-Effekte und Neon

Box-Shadow in Farbe statt Schwarz erzeugt Leuchten und Aufmerksamkeit. Farbige Schatten werden besonders effektiv in Dark-Mode-Interfaces eingesetzt, wo sie die Designsprache von Neon-Akzenten aufgreifen. Ein Call-to-Action-Button in Teal mit einem passenden Teal-Glow strahlt Energie aus und erhöht die Klickrate messbar. Für den perfekten Farbton hilft der Farben-aus-Bild-Extraktor, wenn du die Hauptfarbe eines Produktfotos als Glowfarbe nutzen willst.

box-shadow: 0 0 20px rgba(15, 118, 110, 0.5);

Neumorphism: CSS Box-Shadow als vollständiges Designkonzept

Neumorphism (auch Soft UI) ist ein Designtrend, der vollständig auf der kreativen Kombination von Box-Shadows aufbaut. Das Konzept: Elemente wirken wie aus dem Hintergrundmaterial "herausgepresst" oder hineingedrückt — durch die Kombination eines hellen Schattens oben links (simuliertes Licht) und eines dunklen Schattens unten rechts (simulierter Schatten).

/* Herausgepresstes Element */
background: #E0E5EC;
box-shadow:
  6px 6px 12px #b8bec7,
  -6px -6px 12px #ffffff;

/* Eingedrücktes Element (aktiv/focus) */
background: #E0E5EC;
box-shadow:
  inset 4px 4px 8px #b8bec7,
  inset -4px -4px 8px #ffffff;

Wichtig beim Neumorphism: Barrierefreiheit beachten. Schwache Kontraste können für sehbeeinträchtigte Nutzer schwer erkennbar sein. Prüfe immer deinen Farbkontrast mit dem kostenlosen WCAG-Checker auf Werkix — er zeigt dir sofort, ob du die AA- oder AAA-Anforderungen erfüllst. Neumorphism ist als primäres Interface-Muster für Accessibility-kritische Projekte nicht geeignet, eignet sich aber hervorragend als dekorativer Akzent.

Box-Shadow und Rendering-Performance

CSS-Schatten sind eine häufige Ursache für Performance-Probleme, besonders auf mobilen Geräten und bei Animationen. Das liegt daran, dass der Browser für jeden Frame die Schattenberechnung neu durchführen muss — ein aufwendiger Prozess, der die GPU stark belasten kann.

Gutes Design ist so wenig Design wie möglich. — Dieter Rams

box-shadow vs. filter:drop-shadow() — Der entscheidende Unterschied

Eine häufige Verwechslung in der Web-Entwicklung: box-shadow und filter: drop-shadow() erzeugen ähnliche visuelle Effekte, unterscheiden sich aber fundamental in ihrer Funktionsweise — und das hat praktische Konsequenzen für jeden Entwickler.

Praktische Anwendungsfälle im modernen Webdesign

Box-Shadow ist ein universelles Werkzeug — aber nur wenn es mit Bedacht eingesetzt wird, entfaltet es seine volle Wirkung. Hier sind die häufigsten und wirkungsvollsten Anwendungsfälle, die du direkt mit unserem Generator umsetzen kannst.

Für die Entwicklung vollständiger UI-Systeme lohnt es sich, den Box-Shadow-Generator mit dem CSS Gradient Generator und dem Border-Radius Generator zu kombinieren — alle drei sind kostenlos auf Werkix verfügbar und produzieren sofort kopierbaren CSS-Code.

Navigation und Header

Sticky-Navigationsleisten erhalten beim Scrollen einen Schatten, der die Ebenenstruktur der Seite visuell kommuniziert. Der Schatten sollte subtil und niedrig sein — zu viel Blur wirkt schwer und unmodern.

/* Scrollt der Nutzer, wird dieser Schatten aktiviert */
nav.scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

Card-Design für Content-heavy Seiten

Karten profitieren von mehrschichtigen Schatten. Ein weicher, tiefer Schatten hebt die Karte vom Hintergrund ab, ohne sie zu überladen. Ein zweiter, feiner Schatten direkt am Rand der Karte simuliert die physische Kante.

.card {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 4px 24px rgba(0,0,0,0.08);
}
.card:hover {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.06),
    0 8px 40px rgba(0,0,0,0.13);
}

Formularfelder im Fokus

Statt des Standard-Outline nutzt professionelles CSS einen farbigen Box-Shadow für den Focus-Ring. Das erlaubt exakte Farb- und Größenkontrolle und sieht deutlich eleganter aus. Stelle dabei sicher, dass der Fokus-Indikator die WCAG-Anforderungen erfüllt — der WCAG-Kontrast-Checker hilft dabei.

input:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.2);
  border-color: #0F766E;
}

Modals und Overlays

Modals benötigen starke Schatten, die die Überordnung auf der Z-Achse klar kommunizieren. Hier empfiehlt sich eine Kombination aus einem weichen, weitreichenden Schatten und einem dichteren, nahgelegenen:

.modal {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.18),
    0 24px 64px rgba(0, 0, 0, 0.28);
}

CSS Box-Shadow Rezepte – Komplette Codeschnipsel für häufige Anwendungsfälle

Die folgenden Rezepte sind produktionsfertig und können direkt in dein Projekt eingefügt werden. Sie decken die häufigsten Anwendungsfälle in der modernen Web-Entwicklung ab — ob React-Komponente, Vue-App oder klassisches HTML/CSS-Projekt.

Button-Hover-Effekt mit sanfter Tiefe

button {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
button:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}
button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  transform: translateY(0);
}

Sticky Navigation mit Shadow-on-Scroll

/* JavaScript fügt die Klasse 'sticky' beim Scrollen hinzu */
nav {
  transition: box-shadow 0.3s ease;
}
nav.sticky {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
}

Premium Modal / Dialog

.modal {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.30),
    0 8px 20px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

Input-Fokus-Ring (WCAG-konform)

input {
  border: 1.5px solid #DDE2EF;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus {
  border-color: #0F766E;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.20);
  outline: none;
}

Neobrutalism Card

.neo-card {
  background: #FFFFFF;
  border: 2px solid #000000;
  box-shadow: 5px 5px 0px #000000;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.neo-card:hover {
  box-shadow: 8px 8px 0px #000000;
  transform: translate(-3px, -3px);
}

Farbiger CTA-Button mit Glow

.cta-btn {
  background: #0F766E;
  color: white;
  box-shadow:
    0 4px 14px rgba(15, 118, 110, 0.45),
    0 1px 3px rgba(15, 118, 110, 0.30);
  transition: box-shadow 0.2s, transform 0.2s;
}
.cta-btn:hover {
  box-shadow:
    0 6px 20px rgba(15, 118, 110, 0.60),
    0 2px 6px rgba(15, 118, 110, 0.40);
  transform: translateY(-2px);
}

Box-Shadow im Kontext moderner CSS-Frameworks

Unser Generator produziert reines CSS — das ist der direkteste Weg, den Output zu nutzen. Dennoch lohnt sich ein Blick auf die Integration in verbreitete Frameworks:

Tailwind CSS: Tailwind bringt eigene Shadow-Utilities mit (shadow-sm, shadow, shadow-lg usw.), die intern exakt die gleiche box-shadow-Eigenschaft setzen. Für Tailwind-Projekte kannst du den generierten Code direkt in tailwind.config.js unter theme.extend.boxShadow als Custom-Value eintragen.

Bootstrap: Bootstrap nutzt Box-Shadows für seine Card- und Elevation-Klassen (.shadow-sm, .shadow, .shadow-lg). Mit CSS-Custom-Properties kannst du die Bootstrap-Standardwerte überschreiben und durch eigene Generatorwerte ersetzen.

CSS-in-JS (styled-components, Emotion): Der generierte Code funktioniert direkt in Template-Literalen. Variablen für Farbe und Blur machen den Schatten dynamisch und themenabhängig — ideal für Dark-Mode-Switches.

Der fertige Code von unserem Generator ist zu 100% standard-konformes CSS und funktioniert ohne Anpassung in jedem dieser Kontexte. Nach der Code-Erzeugung empfiehlt sich der CSS Minifier, um den CSS-Code für den Production-Build zu komprimieren.

Fazit: Professionelle Schatten in Sekunden — dein vollständiger Workflow

CSS-Schatten sind eines der mächtigsten und gleichzeitig am meisten unterschätzten Werkzeuge im Webdesign-Arsenal. Ein gut gesetzter box-shadow kommuniziert Hierarchie, Interaktivität und Materialität — und das rein über visuelle Wahrnehmung, ohne einen einzigen Pixel Inhalt zu verändern.

Mit unserem kostenlosen CSS Box-Shadow Generator erstellst du komplexe, mehrschichtige Schatten-Effekte in Sekunden — visuell, ohne manuelles Probieren, mit direktem Code-Export. Der Generator ist Teil einer wachsenden Sammlung von über 60 kostenlosen Browser-Tools auf Werkix. Für dein vollständiges visuelles CSS-System empfehlen wir den kombinierten Einsatz mit dem Gradient Generator, dem Border-Radius Generator und dem Farbkontrast-Checker — alle kostenlos, alle im Browser, alle ohne Anmeldung.

Entdecke die komplette Werkix Mini-Tools-Sammlung — über 60 kostenlose Browser-Tools für Design, Entwicklung und Produktivität, von der Farbpaletten-Generierung über den Farb-Konverter bis hin zu praktischen Entwickler-Tools.