Warum sieht mein Schatten grau und flach aus?

Meist, weil er ein deckendes helles Grau ist statt einer dunklen Farbe mit niedriger Deckkraft. Probier Schwarz mit 10-15% Alpha und größerer Unschärfe; dann tönt der Schatten das, was darunter liegt, statt als grauer Schmier obendrauf zu sitzen.

Was ist der Unterschied zwischen Unschärfe und Ausdehnung?

Die Ausdehnung ändert die Größe der Schattenform, bevor sie unscharf wird; die Unschärfe macht ihre Kante weich. Mehr Ausdehnung ergibt einen größeren, genauso hart begrenzten Schatten, mehr Unschärfe behält die Größe bei und lässt den Rand auslaufen.

Kann ich einen Schatten innerhalb des Elements setzen?

Ja, mit dem Schlüsselwort inset, das der Generator hinzufügen kann. inset-Schatten werden innerhalb der Padding-Box gezeichnet, und so bekommen Eingabefelder ihren dezent vertieften Look.

Wie nutze ich den Schatten in Tailwind CSS?

Als beliebigen Wert: Kopiere den box-shadow-Wert und setz ihn in eckige Klammern, mit Unterstrichen statt Leerzeichen, zum Beispiel shadow-[0_4px_12px_-2px_rgb(23_17_25/0.18)]. Für einen Schatten, den du mehrfach nutzt, ergänze ihn stattdessen unter boxShadow in deinem Tailwind-Theme.

CSS Box Shadow Generator

Baue einen box-shadow, indem du Versatz, Unschärfe, Ausdehnung und Farbe einstellst, staple mehrere Ebenen und kopiere CSS, das genau das zeigt, was die Vorschau zeigt.

Browser-Tool

2 Ebenen

Farbe der Vorschaufläche

Erzeugter Code

.card {
  box-shadow: 0px 4px 12px -2px rgb(23 17 25 / 0.18),
    0px 1px 3px 0px rgb(23 17 25 / 0.1);
}

Dateiname

.css

Über CSS-Box-Shadow-Generator

Ein box-shadow besteht aus vier Zahlen, einer Farbe und einem optionalen inset, und ein natürlich wirkendes Ergebnis heißt meist, alle zusammen anzupassen und zu sehen, was passiert. Diese Seite baut den Schatten visuell und gibt dir das CSS, das genau das erzeugt, was auf dem Bildschirm zu sehen ist. Kostenlos, online und ohne E-Mail-Adresse. Das CSS entsteht lokal, während du die Regler bewegst.

So nutzt du CSS-Box-Shadow-Generator

Den Versatz einstellenHorizontaler und vertikaler Versatz rücken den Schatten von der Box weg. Ein kleiner positiver vertikaler Versatz ohne horizontalen wirkt wie Licht direkt von oben, und davon gehen die meisten Oberflächen aus.
Unschärfe und Ausdehnung hinzufügenDie Unschärfe macht die Kante weich; die Ausdehnung (spread) vergrößert oder verkleinert den Schatten, bevor die Unschärfe angewendet wird. Eine negative Ausdehnung mit großer Unschärfe ergibt den engen, weichen Schatten, den man auf Karten sieht.
Ebenen stapeln, wenn du Tiefe brauchstEchte Tiefe entsteht meist aus zwei oder drei Schatten mit unterschiedlicher Unschärfe statt aus einem schweren. Füge eine Ebene hinzu, und der Generator hält die Reihenfolge ein, denn sie zählt: Der erste Schatten in der Liste liegt oben.
Das CSS kopierenDie erzeugte Regel ist derselbe Wert, den die Vorschau verwendet, was du einfügst, zeigt also das, was du gesehen hast.

Was jeder Wert bewirkt

Die Syntax lautet offset-x, offset-y, blur-radius, spread-radius, Farbe, mit einem optionalen inset davor. Die Unschärfe darf nicht negativ sein. Die Ausdehnung schon, und eine negative Ausdehnung ist der übliche Weg, einen weichen Schatten seitlich nicht herauslaufen zu lassen. Ein inset-Schatten wird innerhalb der Border-Box gezeichnet statt außerhalb, und so entstehen gedrückte Buttons und eingelassene Flächen.

Alpha zählt mehr als die Farbe

Ein Schatten, der auf Weiß grau wirkt, sieht auf farbigem Hintergrund falsch aus. Eine dunkle Farbe mit niedrigem Alpha statt eines hellen Graus mit voller Deckkraft lässt die Fläche darunter durchscheinen, und so funktioniert derselbe Schatten auf jedem Hintergrund.

Was das Tool nicht kann

Ein box-shadow folgt dem border-radius seines Elements, aber nicht der Form seines Inhalts, und kann deshalb keine nicht rechteckige Grafik nachzeichnen. Dafür brauchst du filter: drop-shadow().
Große Unschärferadien auf vielen Elementen sind teuer zu zeichnen, und ein animierter Schatten erzwingt in jedem Frame ein Neuzeichnen. Die günstigere Technik ist, die opacity eines Pseudo-Elements mit festem Schatten zu animieren.