Box Shadow Generator

Erzeuge eine kopierbare CSS-box-shadow-Deklaration aus Versatz, Unschärfe, Ausbreitung und Farbe.

✓ Viele Berechnungen laufen lokal im Browser

Horizontaler Versatz (px)Vertikaler Versatz (px)Unschärferadius (px)Ausbreitung (px)Schattenfarbe

Wofür du das Tool einsetzen kannst

Erzeuge eine kopierbare CSS-box-shadow-Deklaration aus Versatz, Unschärfe, Ausbreitung und Farbe.

So funktioniert es

Gib X, Y, Unschärfe, Ausbreitung anhand der beschrifteten Felder ein.
Erzeuge eine kopierbare CSS-box-shadow-Deklaration aus Versatz, Unschärfe, Ausbreitung und Farbe.
Vergleiche das Ergebnis mit dem dokumentierten Beispiel und beachte die genannte Grenze.

Methode und Rechenweg

Erzeuge eine kopierbare CSS-box-shadow-Deklaration aus Versatz, Unschärfe, Ausbreitung und Farbe. Die Berechnung oder Umwandlung folgt dabei ausschließlich der im Werkzeug implementierten Logik.

Beispiel

Die Beispiele zeigen konkrete Eingaben und die dazu erwartete Ausgabe.

Nachvollziehbares Beispiel

Eingabe

X: 0 px
Y: 8 px
Unschärfe: 24 px
Ausbreitung: 0 px
Farbe: #00000033

Erwartete Ausgabe

box-shadow: 0px 8px 24px 0px #00000033;

Häufige Fehler

Kontrolliere X, Y, Unschärfe, Ausbreitung auf zulässige Werte und das im Feld gezeigte Format.
Mehrere Schatten und inset-Schatten werden nicht kombiniert.

Grenzen des Ergebnisses

Mehrere Schatten und inset-Schatten werden nicht kombiniert.

Datenschutz-Hinweis: Soweit dieses Tool lokal im Browser arbeitet, ist für die Berechnung kein Upload erforderlich. Technische Zugriffsdaten beim Seitenaufruf bleiben davon unberührt.

Häufige Fragen

Wie verarbeitet das Werkzeug X, Y, Unschärfe, Ausbreitung?

Erzeuge eine kopierbare CSS-box-shadow-Deklaration aus Versatz, Unschärfe, Ausbreitung und Farbe.

Was ist bei X, Y, Unschärfe, Ausbreitung zu kontrollieren?

Die beschrifteten Felder zeigen das erwartete Format. Für diese Aufgabe gilt konkret: Erzeuge eine kopierbare CSS-box-shadow-Deklaration aus Versatz, Unschärfe, Ausbreitung und Farbe.

Wo liegt die fachliche oder technische Grenze?

Mehrere Schatten und inset-Schatten werden nicht kombiniert.

Bleiben die Angaben für diese Funktion im Browser?

Erzeuge eine kopierbare CSS-box-shadow-Deklaration aus Versatz, Unschärfe, Ausbreitung und Farbe. Die dafür nötige Verarbeitung läuft lokal im Browser; technische Zugriffsdaten des Seitenaufrufs bleiben davon unberührt.