CSS-Box-Schattengenerator

Eine Box-Shadow-Deklaration besteht aus sechs beweglichen Teilen – X- und Y-Versatz, Unschärfe, Ausbreitung, Farbe und dem optionalen Schlüsselwort „inset“ – und die einzige Möglichkeit, sie richtig hinzubekommen, besteht darin, sie zu sehen. Dieser Generator platziert jedes Teil auf einem Schieberegler und rendert das Ergebnis beim Ziehen auf einer Vorschaukarte, sodass die CSS-Zeile unten immer genau das ist, was Sie sehen.

Schatten in der realen Welt bestehen selten aus einer einzigen Ebene. Mit der Ebenenliste können Sie bis zu vier Schatten in einer Deklaration stapeln: eine enge dunkle Linie für die Kantendefinition plus eine breite weiche Schattierung für die Höhe oder das Hell-Dunkel-Paar, das den Neumorphismus definiert. Wählen Sie eine Ebene aus, um sie zu bearbeiten, entfernen Sie die nicht benötigten Ebenen, und der kombinierte Box-Schatten-Wert wird live aktualisiert.

Auf dunklen Oberflächen sehen Schatten ganz anders aus, da ein schwarzer Schatten auf einer nahezu schwarzen Seite einfach verschwindet. Der Vorschau-Hintergrundumschalter schaltet den Hintergrund zwischen hell und dunkel um, sodass Sie beide Themen vor dem Versand überprüfen können. Voreingestellte Seiten decken die Varianten ab, nach denen Menschen tatsächlich suchen: einen weichen Höhenschatten, einen eingelassenen Brunnen, das zweischichtige Neumorphismus-Rezept und einen subtilen Kartenschatten.

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