CSS Box-Shadow-Generator

Eine box-shadow-Deklaration besteht aus sechs beweglichen Teilen – X- und Y-Versatz, Unschärfe, Ausdehnung, Farbe und dem optionalen Schlüsselwort inset – und der einzige Weg, sie richtig einzustellen, ist, sie zu sehen. Dieser Generator legt jeden Teil auf einen Schieberegler und zeigt das Ergebnis auf einer Vorschaukarte während des Ziehens, sodass die CSS-Zeile am Ende immer exakt dem entspricht, was Sie sehen.

Reale Schatten bestehen selten aus nur einer Ebene. Die Ebenenliste erlaubt es, bis zu vier Schatten in einer Deklaration zu stapeln: eine enge, dunkle Linie für die Kantendefinition plus einen breiten, weichen Verlauf für die Tiefenwirkung oder das Hell-Dunkel-Paar, das den Neumorphismus ausmacht. Wählen Sie eine Ebene zur Bearbeitung aus, entfernen Sie die, die Sie nicht brauchen, und der kombinierte box-shadow-Wert aktualisiert sich live.

Schatten wirken auf dunklen Oberflächen ganz anders, wo ein schwarzer Schatten auf einer fast schwarzen Seite einfach verschwindet. Der Umschalter für den Vorschauhintergrund wechselt den Hintergrund zwischen hell und dunkel, sodass Sie beide Themen prüfen können, bevor Sie ausliefern. Voreingestellte Seiten decken die Varianten ab, nach denen tatsächlich gesucht wird: ein weicher Tiefenschatten, eine innenliegende Vertiefung, das Neumorphismus-Rezept mit zwei Ebenen und ein dezenter Kartenschatten.

Wie jedes Tool auf dieser Seite ist auch der Generator kostenlos und läuft vollständig in Ihrem Browser: kein Upload, kein Konto, und er funktioniert offline, sobald die Seite geladen ist.