Erzeugen Sie einen Wert für die CSS-Eigenschaft box-shadow

Mit Schattengenerator können Designer und Frontend-Entwickler eine Oberfläche vor der Umsetzung abstimmen. Erzeugen Sie einen Wert für die CSS-Eigenschaft box-shadow.

Erzeugen Sie einen Wert für die CSS-Eigenschaft box-shadow. Nutzen Sie es kostenlos im Browser, ohne ein Konto anzulegen.

Bedienung

Geben Sie den horizontalen und vertikalen Versatz für den Schatten ein, dann die Werte für Unschärfe und Ausbreitung.
Geben Sie die Farbe im Hexadezimalformat an, mit sechs Ziffern, denen ein Rautezeichen vorangestellt ist.
Klicken Sie auf die Schaltfläche zum Generieren, um die vollständige Eigenschaft box-shadow zu erhalten.
Kopieren Sie die erzeugte Regel und fügen Sie sie in Ihr Stylesheet ein, um sie anzuwenden.
Passen Sie die Werte an, wenn die Darstellung nicht dem gewünschten Effekt entspricht.

Beispiel

Die Beispieleingabe beschreibt einen verschobenen Schatten mit Unschärfe und einer dunklen Farbe. Nach dem Generieren zeigt das Ergebnis die entsprechende Eigenschaft box-shadow. Sie können jeweils einen Wert ändern, um zu sehen, wie jede Einstellung den Schatten beeinflusst.

Eingabe

Ergebnis

box-shadow: 2px 2px 8px 1px #000000;

Grenzen und Formate

Das Tool zeigt keine Vorschau des Schattens auf einem Element an; es liefert nur den CSS-Code.
Versatz-, Unschärfe- und Ausbreitungswerte müssen numerisch sein, und Versätze können negativ sein.
Die Farbe muss gültig hexadezimal sein; eine fehlerhafte Farbe verhindert die Generierung.
Die endgültige Darstellung hängt vom Browser und vom Kontext des Elements ab.

Wo die Verarbeitung stattfindet

Alles geschieht in Ihrem Browser. Die von Ihnen eingegebenen Einstellungen bleiben auf Ihrem Gerät und werden niemals hochgeladen oder gespeichert. Die CSS-Eigenschaft wird lokal zusammengesetzt, ohne externe Verbindung.

Häufige Fragen

Welche Einheiten sollte ich für Versatz und Unschärfe verwenden?

Werte sind für Versatz und Unschärfe normalerweise einheitenlos, da sie Pixel darstellen. Sie können auch eine Einheit wie px oder rem hinzufügen. Behalten Sie dieselbe Logik für alle Werte bei.

Kann ich eine transparente Farbe verwenden?

Das Feld erwartet eine hexadezimale Farbe. Für einen transparenten Schatten können Sie eine Farbe mit Alphakanal verwenden, wenn das Format dies zulässt, aber der einfachste Ansatz ist, eine deckende Farbe zu wählen und die Deckkraft in Ihrem CSS anzupassen.

Warum ist mein Schatten nicht sichtbar?

Prüfen Sie, ob die Eigenschaft auf ein Element mit sichtbarer Größe angewendet wird. Ein zu kleiner Unschärfe- oder Ausbreitungswert kann den Schatten unsichtbar machen. Stellen Sie außerdem sicher, dass die Farbe nicht mit dem Hintergrund identisch ist.