CSS-Box-Shadow-Generator — mehrschichtige Schatten, Neumorphismus & Text-Shadow
Gestalte mehrschichtige box-shadow- und text-shadow-Effekte mit Live-Vorschau und Vorlagen für Elevation, Neumorphismus und Glow, und kopiere das CSS.
box-shadow: 0 10px 30px -6px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.1);
shadow-[0_10px_30px_-6px_rgba(15,23,42,0.18),0_4px_10px_-4px_rgba(15,23,42,0.1)]
Läuft komplett in deinem Browser. Nichts, was du eingibst, wird an uns gesendet oder gespeichert. Alle kostenlosen Tools ansehen.
Ein Problem gefunden oder etwas, das besser sein könnte? Wir lesen jede Nachricht und beheben Fehler schnell.
Mit diesem kostenlosen CSS-Box-Shadow-Generator gestaltest du Schatten nach Augenmaß und kopierst das exakte CSS für box-shadow oder text-shadow. Stapele so viele Ebenen, wie du brauchst, jede mit eigenem horizontalem und vertikalem Versatz, Unschärfe, Ausbreitung, Farbe, Deckkraft und Inset-Einstellung, und sieh sie dir auf einer Vorschaukarte an, deren Hintergrund, Farbe und Eckenradius du passend zu deinem Design ändern kannst.
Realistische Schatten bestehen fast nie aus nur einer Ebene. Ein scharfer, naher Schatten und ein großer, blasser zusammen wirken wie ein Objekt, das sich von der Seite abhebt – so funktionieren die Elevation-Stufen von Material Design –, und Neumorphismus braucht zwei gegenläufige Schatten auf einer Karte in derselben Farbe wie ihr Hintergrund. Die Vorlagen decken diese Muster ab, und die Hinweise unten erklären die box-shadow-Syntax, warum Schichten besser aussieht und was Schatten an Rendering-Leistung kosten.
So funktioniert’s
- Wähle Box-Shadow oder Text-Shadow.
- Starte mit einer Vorlage oder passe die ausgewählte Ebene mit den Schiebereglern an: Versatz, Unschärfe, Ausbreitung, Farbe, Deckkraft und Inset.
- Füge mit + Ebene hinzufügen weitere Ebenen hinzu (dabei wird die ausgewählte kopiert), wähle eine Ebene in der Liste aus, um sie zu bearbeiten, und sortiere sie mit den Pfeilen um. Die erste Ebene wird oben gezeichnet.
- Passe die Vorschau an dein Design an: Stelle Seitenhintergrund, Kartenfarbe und Eckenradius ein.
- Kopiere das CSS oder die Tailwind-Klasse mit Arbitrary Value.
Häufige Fragen
Was bedeuten die Werte von box-shadow?
box-shadow: inset? x-offset y-offset blur spread colour. Der x-Versatz verschiebt den Schatten nach rechts (negativ: nach links), der y-Versatz nach unten (negativ: nach oben). Blur bestimmt, wie weich die Kante ist; 0 ergibt eine harte Kante. Spread vergrößert den Schatten vor dem Weichzeichnen (negativ verkleinert ihn – so verhinderst du, dass eine große Unschärfe an den Seiten sichtbar wird). Inset zeichnet den Schatten innerhalb des Elements statt außerhalb. Mehrere Schatten werden durch Kommas getrennt, und der erste wird oben gezeichnet.
Wie erstelle ich einen weichen, realistischen Schatten?
Schichte zwei oder mehr Schatten mit geringer Deckkraft statt eines dunklen: einen kleinen, engen Schatten für die Kontaktkante (0 1px 2px mit etwa 10 Prozent Schwarz) und einen größeren, weicheren für das Umgebungslicht (0 8px 24px mit 8 bis 12 Prozent). Gib dem großen eine leicht negative Ausbreitung, damit er unter dem Element bleibt. Den Schatten mit einer dunklen Variante der Hintergrundfarbe statt mit reinem Schwarz zu tönen, wirkt auf farbigen Seiten außerdem natürlicher.
Wie erzeuge ich einen Neumorphismus-Effekt?
Gib dem Element dieselbe Hintergrundfarbe wie seinem Elternelement und füge dann zwei Schatten hinzu: einen dunkleren, nach rechts unten versetzt, und einen helleren (oft weißen), nach links oben versetzt, zum Beispiel 9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5) auf #e0e5ec. Mach sie inset für einen gedrückten Zustand. Sei bei Bedienelementen vorsichtig damit: Neumorphe Buttons haben einen sehr geringen Kontrast zu ihrem Hintergrund und verfehlen meist die WCAG-Anforderung von 3:1 für UI-Komponenten, sofern du keinen Rahmen oder eine kräftigere Kontur hinzufügst.
Was ist der Unterschied zwischen box-shadow und filter: drop-shadow()?
box-shadow folgt dem rechteckigen Kasten des Elements einschließlich seines border-radius und unterstützt Spread und Inset. filter: drop-shadow() folgt den sichtbaren Pixeln, zeichnet also die Kontur eines transparenten PNG, eines SVG-Icons oder einer zugeschnittenen Form nach, kennt aber weder Spread noch Inset und nimmt nur einen Schatten pro Funktion. Nimm box-shadow für Karten und Buttons, drop-shadow für unregelmäßige Bilder und Icons.
Kann text-shadow Spread oder Inset haben?
Nein. text-shadow nimmt nur x-Versatz, y-Versatz, Unschärfe und Farbe. Um eine Kontur zu simulieren, stapelst du vier oder mehr harte Schatten, jeweils um 1px in jede Richtung versetzt (die Vorlage Kontur), oder verwendest -webkit-text-stroke, das inzwischen breit unterstützt wird. Ein weicher Textschatten mit geringer Deckkraft kann die Lesbarkeit von weißem Text auf Fotos verbessern, zählt aber nicht zum WCAG-Kontrast.
Bremsen Box-Shadows die Performance?
Statische Schatten sind günstig. Große Blur-Radien werden teuer, wenn sie in jedem Frame neu gezeichnet werden, etwa wenn box-shadow beim Hover über viele Karten animiert wird. Der übliche Trick: Den Schatten auf ein Pseudo-Element legen und stattdessen dessen Deckkraft animieren – das kann der Browser auf der GPU compositen, ohne die Unschärfe neu zu zeichnen.
Elevation: eine einheitliche Schattenskala
Designsysteme legen eine Handvoll Elevation-Stufen fest und verwenden nur diese, damit „wie hoch“ ein Element liegt, eine Bedeutung hat: Karten auf Stufe 1, Dropdowns auf 2 oder 3, Dialoge auf 4 oder 5. Die Elevation-Vorlagen hier folgen diesem Muster und kombinieren jeweils einen engen mit einem breiteren Schatten, die beide mit der Höhe wachsen.
• Stufe 1, ruhende Karten und Listeneinträge: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24).
• Stufe 2, angehobene Karten und Einträge beim Hover: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12).
• Stufe 3, Dropdowns und Popover: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.1).
• Stufen 4 und 5, Modals und Dialoge: größere Versätze und Unschärfen, weiterhin unter 20 Prozent Deckkraft.
Speichere die Stufen als CSS Custom Properties (--shadow-1 bis --shadow-5) oder in deinem Tailwind-Theme, statt Werte in Komponenten einzufügen, damit sich die Skala an einer Stelle anpassen lässt.
Schatten im Dark Mode
Ein schwarzer Schatten auf fast schwarzem Hintergrund ist unsichtbar, dunkle Oberflächen zeigen Elevation daher anders: Höhere Flächen bekommen etwas hellere Hintergrundfarben, und Schatten werden, wenn man sie beibehält, größer und deckender. Ein dezenter heller 1px-Rahmen oder ein inneres Highlight (inset 0 1px 0 rgba(255,255,255,0.06)) wirkt oft besser als jeder äußere Schatten. Glow-Effekte wie die Vorlage Glow funktionieren auf dunklem Hintergrund, weil sie Licht hinzufügen statt es wegzunehmen; spar sie dir für Fokuszustände und Hervorhebungen auf, nicht für jede Karte.
Ähnliche kostenlose Tools
- CSS-Gradient-Generator — Erstelle lineare, radiale und konische Farbverläufe mit verschiebbaren Farbstopps, Winkelrad und Vorlagen. Kopiere das CSS oder eine Tailwind-Klasse.
- Farbpaletten-Generator — Drück die Leertaste für eine neue Palette, fixiere die Farben, die dir gefallen, wähle eine Harmonie oder hol dir die Palette aus einem Foto. Export als CSS, Tailwind, SCSS, JSON oder PNG.
- Kontrast-Checker — Prüfe Text- und Hintergrundfarben nach WCAG 2.x AA und AAA, sieh den APCA-Lc-Wert und erhalte die nächstgelegene Farbe, die besteht.
- Farbwähler & Konverter — Nimm eine beliebige Farbe von irgendwo auf deinem Bildschirm auf oder rechne sofort zwischen HEX, RGB und HSL um.