CSS-Box-Shadow-Generator
Erstellen Sie CSS-Box-Shadow-Code mit anpassbaren Werten für Versatz, Weichzeichnung, Ausbreitung, Farbe und Innenschatten.
Tool ausführen
Mit diesem Generator erstellen Sie saubere CSS-Deklarationen für den Schattenwurf von Box-Elementen. Sie steuern die horizontale und vertikale Verschiebung, den Weichzeichnungsradius sowie die Ausbreitung über präzise Zahlenwerte. Das Werkzeug hängt automatisch die passende Einheit an alle numerischen Werte an, sodass Sie den fertigen Code direkt in Ihr Stylesheet einfügen können. Zusätzlich passen Sie die Schattenfarbe nach Bedarf an, beispielsweise als Hexadezimalwert mit Transparenz. Über eine zuschaltbare Option wechseln Sie bei Bedarf von einem äußeren Schatten zu einem Innenschatten. Sämtliche Parameter sind optional und starten mit praktischen Standardwerten. Sie können auch Nullwerte für Abstände, Weichzeichnung und Ausdehnung festlegen, um ganz flache oder scharf begrenzte Kanten zu definieren. Nach der Eingabe sehen Sie sofort die vollständige Deklaration im Ausgabefeld. Das erleichtert das Anpassen von UI-Karten, Schaltflächen oder Dialogfenstern im modernen Webdesign, ohne CSS-Syntaxregeln manuell nachschlagen zu müssen.
Anleitung
- Passen Sie die Werte für horizontalen Versatz (Offset X) und vertikalen Versatz (Offset Y) an.
- Geben Sie Werte für Weichzeichnung (Blur) und Ausbreitung (Spread) ein.
- Wählen Sie eine Farbangabe für den Schatten, wie etwa #00000033.
- Aktivieren Sie das Kontrollkästchen Inset, wenn der Schatten nach innen geworfen werden soll.
- Kopieren Sie den erzeugten box-shadow-Code für Ihr CSS.
Beispiele
- Standardmäßiger weicher Schlagschatten mit Offset X: 2, Offset Y: 2, Blur: 5, Spread: 0 und Farbe: #00000033 ergibt box-shadow: 2px 2px 5px 0px #00000033;.
- Dezenter Innenschatten für Eingabefelder mit Offset X: 0, Offset Y: 2, Blur: 4, Spread: 0, Farbe: #00000020 und aktivem Inset ergibt box-shadow: inset 0px 2px 4px 0px #00000020;.
FAQ
Welche Maßeinheiten verwendet das Werkzeug?
Numerische Werte für Versatz, Weichzeichnung und Ausdehnung werden im generierten CSS-Code automatisch mit der Einheit px formatiert.
Werden auch negative Werte für den Versatz unterstützt?
Ja, negative Zahlen verschieben den Schatten nach links oder nach oben.
Was bewirkt die Option Inset?
Wenn Sie Inset aktivieren, wird der Schatten innerhalb des Rahmens des Elements gezeichnet, statt nach außen zu fallen.
Kann ich alle Werte auf Null setzen?
Ja, Sie können für Versatz, Weichzeichnung und Ausbreitung den Wert 0 angeben.