CSS Box Shadow Generator
Schatten per Regler einstellen, live ansehen und den box-shadow-Code kopieren.
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);
Die Werte von box-shadow
Die Eigenschaft box-shadow besteht aus Versatz nach rechts, Versatz nach unten, Weichzeichnung (blur), Ausdehnung (spread) und Farbe, zum Beispiel 0px 4px 12px 0px rgba(0, 0, 0, 0.25). Positive Versätze verschieben den Schatten nach rechts und unten.
Mit der Option für einen inneren Schatten wird inset vorangestellt und der Schatten wirkt wie eine Vertiefung. Die Farbe wird mit Deckkraft als rgba ausgegeben.
- Dezente Schatten mit geringer Deckkraft wirken hochwertiger als harte.
- Größere Unschärfe wirkt wie ein höher schwebendes Element.
- Mehrere Schatten lassen sich im Stylesheet durch Kommas kombinieren.
Fragen und Antworten
Was bewirkt der Ausbreitungswert?
Er vergrößert oder verkleinert den Schatten gleichmäßig in alle Richtungen, bevor er unscharf wird.
Wie bekomme ich einen inneren Schatten?
Mit der Option inset wird der Schatten innerhalb des Elements gezeichnet.
Kostet das Tool etwas?
Nein. Das Tool ist kostenlos und braucht weder Anmeldung noch Installation. Es gibt keine feste Grenze für die Länge der Eingabe, die Grenze setzt nur der Arbeitsspeicher deines Geräts.