CSS-Box-Shadow-Generator
Entwickler-ToolNeuErstelle CSS-box-shadow-Schatten visuell und kopiere den Code.
Dieses Tool läuft vollständig in deinem Browser. Deine Dateien verlassen dein Gerät nie — nichts wird hochgeladen.
Shadow settings
Live preview
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
Häufig gestellte Fragen
Wie nutze ich den CSS-Box-Shadow-Generator?
Stell den horizontalen und vertikalen Versatz, die Weichzeichnung, die Ausbreitung, die Farbe und die Deckkraft ein und aktiviere Inset, wenn der Schatten innerhalb des Elements gezeichnet werden soll. Die Live-Vorschau aktualisiert sich sofort bei jeder Änderung, und das erzeugte CSS erscheint darunter zum Kopieren per Klick.
Werden meine Daten bei der Nutzung dieses Tools irgendwohin hochgeladen?
Nein. Alles läuft vollständig in deinem Browser mit reinem JavaScript, sodass weder die Einstellungen noch die Farben noch das erzeugte CSS je an einen Server gesendet werden. Das Tool funktioniert offline, sobald es geladen ist, was deine Arbeit komplett privat hält.
Was ist der Unterschied zwischen Weichzeichnung, Ausbreitung und Inset?
Die Weichzeichnung glättet die Ränder des Schattens (größere Werte ergeben diffusere Ränder), während die Ausbreitung den Schatten vor dem Weichzeichnen vergrößert oder verkleinert. Inset kehrt den Schatten um, um ihn innerhalb der Box statt außerhalb zu zeichnen, nützlich für Eindruck- oder Vertiefungseffekte.