CSS Box Shadow Generator — Neumorphismus, Glasmorphismus & Tailwind
Kostenloser CSS Box Shadow Generator mit Live-Vorschau. Erstelle Schatten, Neumorphismus- und Glasmorphismus-Effekte. Exportiere zu CSS, Tailwind oder CSS-Variablen.
Aktualisiert Mai 2026
Geprüft von Rafael Duarte
box-shadow: 10px 10px 20px 0px rgba(30, 41, 59, 0.15);
shadow-xl
--shadow: 10px 10px 20px 0px rgba(30, 41, 59, 0.15);
Shift+Enter zum Kopieren
So funktioniert der Generator
Regler statt Handarbeit, drei Ausgabeformate
1. Regler einstellen
Versatz X, Versatz Y, Weichzeichner (Blur), Ausbreitung (Spread) und Deckkraft — die Vorschau reagiert sofort auf jede Bewegung.
2. Modus oder Preset wählen
Standard, Neumorphismus oder Glasmorphismus — oder einfach ein fertiges Preset aus der Galerie anklicken.
3. CSS, Tailwind oder Variable kopieren
`Umschalt+Enter` kopiert den CSS-Code sofort, egal wo im Tool der Fokus gerade liegt.
Was dieser Box-Shadow-Generator kann
Drei Schattenstile in einem einzigen Werkzeug
Neumorphismus automatisch berechnet
Aus der gewählten Hintergrundfarbe werden beide gegenläufigen Schatten (Licht- und Schattenseite) automatisch abgeleitet — kein manuelles Ausprobieren nötig.
Glasmorphismus im echten Kontext
Die Vorschau liegt auf einem farbigen Verlauf, inklusive -webkit--Präfix, ohne den der Effekt in Safari komplett fehlt.
Export in drei Formaten
Reines CSS, eine Tailwind-Utility-Klasse oder eine CSS Custom Property — je nachdem, was dein Projekt gerade braucht.
Presets für Material Design und mehr
Fertige Elevation-Stufen nach Material Design, iOS-Schatten, dezente Card-Schatten und Neon-Glows ohne einen einzigen Wert von Hand einzutippen.
Vorschau auf 4 Elementtypen
Card, Button, Eingabefeld und Kreis im direkten Vergleich, wahlweise vor hellem oder dunklem Hintergrund.
19 Presets in 7 Kategorien
Die komplette Bibliothek öffnet sich in einem Modal und lässt sich visuell nach Material, iOS, Cards, Buttons, Glow und Inset filtern.
Beispiele für box-shadow
Fertige Werte zum direkten Übernehmen ins Stylesheet
Wann du dieses Tool brauchst
Die häufigsten Szenarien aus der Praxis
Elevation nach Material Design
Ein enger, harter Schatten kombiniert mit einem diffusen, weit reichenden erzeugt glaubwürdige Tiefe auf Cards und Flächen.
Neon-Effekt auf Buttons und Badges
Versatz null mit hohem Blur ergibt ein umgebendes Leuchten statt eines gerichteten Schattens.
Soft UI (Neumorphismus)
Cards und Buttons mit plastischem 3D-Look — wechsle zwischen Flach, Gedrückt und Konkav.
Milchglas-Cards
Glasmorphismus über farbigem Hintergrund oder Bild, mit korrektem Fallback für Safari.
Denselben Schatten auf verschiedenen Elementen vergleichen
Card, Button, Eingabefeld und Kreis nebeneinander testen, bevor du dich für eine Tiefe entscheidest.
Schatten im Dark Mode prüfen
Vorschau auf dunklen Hintergrund umschalten und sicherstellen, dass der Schatten dort noch sichtbar bleibt, bevor das Interface live geht.
Häufige Fehler
box-shadow statt drop-shadow bei Icons
box-shadow folgt dem rechteckigen Kasten des Elements; drop-shadow folgt der tatsächlichen Form, auch bei transparentem PNG.
Das Präfix -webkit-backdrop-filter vergessen
Ohne dieses Präfix verschwindet der Glasmorphismus-Effekt komplett unter iOS und macOS Safari.
box-shadow direkt im Hover animieren
Löst bei jedem Frame ein Repaint aus. Besser: opacity auf einem Pseudo-Element animieren, das den Schatten bereits fertig gesetzt hat.
Neumorphismus mit zu wenig Kontrast
Der weiche Soft-UI-Look wirkt elegant, kann Text aber unlesbar machen. Kontrast von Text auf neumorphem Hintergrund immer gegen die WCAG-Werte prüfen, bevor es live geht.
Den beliebigen Tailwind-Wert von Hand bearbeiten
Klassen wie shadow-[...] brauchen Unterstriche statt Leerzeichen in jedem Wert. Immer über den Kopieren-Button übernehmen — manuelle Änderungen brechen die JIT-Syntax von Tailwind.
Zu viele Schattenebenen stapeln
Mehr als zwei bis drei kommagetrennte Schatten kosten Renderzeit, ohne den optischen Effekt spürbar zu verbessern — besonders auf Listen mit vielen Elementen.
Warum dieser Box-Shadow-Generator
Kein anderer Generator vereint Standard-Schatten, Neumorphismus und Glasmorphismus an einem Ort — der Neu-Modus berechnet beide gegenläufigen Schatten automatisch, was bei anderen Tools reine Handarbeit mit der Hintergrundfarbe bedeutet.
Das erzeugte CSS ist produktionsreif, inklusive Kompatibilitäts-Präfixen wie -webkit-backdrop-filter, die sonst leicht vergessen werden.
Du testest denselben Schatten auf Card, Button, Eingabefeld und Kreis, vor hellem oder dunklem Hintergrund, bevor du dich entscheidest — alles im Browser, ohne Installation und ohne Konto.
box-shadow vs. filter: drop-shadow
Zwei Wege zum Schatten, unterschiedliche Einsatzzwecke
Häufig gestellte Fragen
Sie fügt einem Element einen oder mehrere Schatten rund um seinen Kasten hinzu — mit horizontalem und vertikalem Versatz, Weichzeichner, Ausbreitungsradius und Farbe. Mehrere Schatten lassen sich mit Komma getrennt stapeln.
Weiterführende Links
Verwandte Tools
- Farbkontrast-Prüfer Design Kostenloser Farbkontrast-Prüfer — WCAG 2.2 AA- und AAA-Konformität sofort prüfen. Live-Textvorschau, Farbenblindheit-Simulation und barrierefreie...
- Farbkonverter & Generator Design Farben zwischen HEX, RGB, HSL und CMYK sofort konvertieren. Kostenloser Online-Farbwähler mit WCAG-Kontrastprüfer und Palettengenerator.
- Farbpaletten-Generator Design Harmonische Farbpaletten aus jeder Basisfarbe generieren. Analogie, Komplementär, Triadisch oder Tetriadisch — als CSS-Variablen oder JSON exportieren.
- Farbpalette aus Bild Design Extrahiere Farbpaletten aus jedem Bild — erhalte HEX-, RGB-, HSL-Codes und exportiere als CSS-Variablen, Tailwind, JSON oder PNG. 100% clientseitig, kein...
- CSS Flexbox Generator Design Kostenloser CSS Flexbox Generator: Live-Vorschau, Tailwind & CSS gleichzeitig, 10 Layout-Vorlagen, kontextuelle Warnungen und React/JSX-Export. Keine Anmeldung.
