Entwickler-Tool

CSS-Box-Shadow-Generator

Ziehen Sie die Regler und kopieren Sie das CSS.

CSS-Box-Shadow-Generator Läuft auf Ihrem Gerät

Läuft in Ihrem Browser — Ihr Text wird nirgendwohin gesendet
Ohne Anmeldung, ohne Kontingent, so oft nutzbar, wie Sie möchten

So funktioniert es

Box-shadow nimmt vier Zahlen und eine Farbe in einer bestimmten Reihenfolge, und der Unterschied zwischen einem Schatten, der wie Tiefe wirkt, und einem, der wie ein Aufkleber wirkt, liegt allein in diesen Zahlen. Die Veränderung beim Ziehen zu sehen ist viel schneller als Raten.

Was die vier Zahlen bedeuten

In dieser Reihenfolge: horizontaler Versatz, vertikaler Versatz, Unschärferadius und Ausbreitung. Die Versätze verschieben den Schatten; die Unschärfe macht seinen Rand weich; die Ausbreitung vergrößert oder verkleinert ihn vor dem Weichzeichnen. Eine negative Ausbreitung zieht den Schatten zusammen, so erhalten Sie einen engen Schatten unter einer Karte, ohne dass er an den Seiten ausläuft.

So wirkt er echt

Licht kommt meist von oben, sodass ein kleiner positiver vertikaler Versatz ohne horizontalen Versatz natürlich wirkt. Große, sehr transparente Schatten wirken wie weiche Tiefe; kleine, dunkle, scharfe wie ein ausgeschnittener Aufkleber. Echte Gegenstände werfen umso unschärfere Schatten, je weiter sie von der Fläche entfernt sind – eine größere Unschärfe deutet ein höheres Element an.

Innere Schatten

Ein innerer Schatten wird innerhalb statt außerhalb des Elements gezeichnet, so entstehen gedrückte Buttons, Eingabefelder und eingelassene Bereiche. Es gelten dieselben vier Zahlen, nur dass sie nach innen zeigen.

Mehrere Schatten gleichzeitig

CSS akzeptiert eine durch Kommas getrennte Liste, und zwei übereinandergelegte Schatten – einer eng und dunkel, einer breit und blass – sehen deutlich besser aus als ein einzelner. Dieser Generator erzeugt einen; für den Schichteffekt fügen Sie zwei selbst zusammen.

FAQ