CSS Box-Shadow-Generator
Erstellen Sie mehrschichtige CSS Box-Shadows mit Live-Schiebereglern für Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und Einfügung – Vorschau auf einem echten Element und fertiges CSS sofort kopieren.
box-shadow: —;
Alles wird live in Ihrem Browser aktualisiert – keine Uploads, keine Registrierung, vollständig kostenlos.
Über CSS Box-Shadow-Generator
Der CSS-Box-Shadow-Generator lässt Sie Box-Schatten visuell gestalten, statt Werte im Code zu erraten. Ziehen Sie Schieberegler für horizontalen und vertikalen Versatz, Weichzeichnungsradius, Ausbreitungsradius, Farbe und Deckkraft — mit einem Inset-Schalter — und beobachten Sie, wie ein echtes Element live aktualisiert wird. Wenn es passt, kopieren Sie das fertige CSS mit einem Klick.
Moderne UI-Schatten bestehen selten aus nur einer Ebene. Dieser Generator unterstützt gestapelte Schatten-Ebenen: Ebenen hinzufügen, duplizieren, ausblenden oder entfernen, und die Vorschau entweder für die ausgewählte Ebene allein oder alle Ebenen kombiniert anzeigen. Einen engen dunklen Schatten unter einem weichen breiten zu schichten, ist der Weg, wie polierte Karten und Buttons ihre Tiefe bekommen.
Sie können auch das Vorschauelement selbst stylen — Boxfarbe, Randradius und Canvas-Hintergrund —, sodass der Schatten in einem realistischen Kontext beurteilt wird, einschließlich dunkler Oberflächen. Starten Sie mit einer Voreinstellung, klicken Sie für Inspiration auf „Ebene zufällig gestalten“ und setzen Sie zurück, wann immer Sie einen sauberen Neustart wollen. Alles läuft in Ihrem Browser.
So verwenden Sie CSS Box-Shadow-Generator
- Passen Sie die Schieberegler für horizontalen Versatz, vertikalen Versatz, Weichzeichnung, Ausbreitung, Farbe und Deckkraft an, und schalten Sie „Inset-Schatten“ ein, wenn Sie einen inneren Schatten möchten.
- Klicken Sie auf „Ebene hinzufügen“ oder „Ebene duplizieren“, um Schatten zu stapeln, und wechseln Sie den Vorschau-Modus zwischen „Diese Ebene“ und „Alle Ebenen“, um jede einzeln feinabzustimmen.
- Stimmen Sie Element und Canvas ab — Boxfarbe, Randradius und Hintergrund —, damit die Vorschau Ihrem echten Design entspricht.
- Wenden Sie eine Voreinstellung an oder nutzen Sie „Ebene zufällig gestalten“, wenn Sie einen Ausgangspunkt statt leerer Schieberegler wollen.
- Kopieren Sie die vollständige CSS-Regel (oder nur den Wert) und fügen Sie sie in Ihr Stylesheet ein.