CSS Box-Shadow-Generator

Ein box-shadow in CSS setzt sich aus sechs Werten zusammen: horizontaler Versatz, vertikaler Versatz, Unschärferadius, Ausbreitungsradius, Farbe und dem optionalen Schlüsselwort inset. Diese Werte von Hand einzutippen ist mühsam, besonders wenn du einen Schatten aus einer Designdatei nachbilden oder einen Effekt reproduzieren willst, den du auf einer anderen Seite gesehen hast. Dieser Generator macht daraus einen visuellen Prozess.

Bewege die Regler, und die Vorschau-Box aktualisiert sich sofort, sodass du genau siehst, wie sich der Schatten verhält, bevor er in dein Stylesheet gelangt. Die Regler für horizontalen und vertikalen Versatz verschieben den Schatten nach links, rechts, oben oder unten. Die Unschärfe bestimmt, wie weich die Kante wirkt, die Ausbreitung vergrößert oder verkleinert den Schatten unabhängig von der Form, aus der er stammt, und der Farbwähler legt sowohl den Farbton als auch die Deckkraft fest. Schalte inset ein, um aus einem äußeren Schlagschatten einen inneren Schatten zu machen, der wie eine gedrückte oder vertiefte Fläche wirkt.

Da reale Oberflächen selten nur einen Schatten verwenden, kannst du mehrere Ebenen übereinanderlegen. Einen engen, dunklen Schatten mit einem breiteren, weicheren zu kombinieren, ist die Grundlage dafür, wie die meisten modernen Karten und Buttons ihre Tiefe bekommen. Die Vorlagen oben bieten einen schnellen Ausgangspunkt für weiche, harte, lange und neumorphe Schatten, die du danach feinjustieren kannst. Sobald der Effekt in der Vorschau passt, kopiere das erzeugte CSS und füge es direkt in dein Projekt ein.