CSS-Box-Shadow-Generator
Zeige einen CSS-Box-Shadow in der Vorschau an und kopiere den Code.
CSS-Box-Shadow-Generator
Your result appears here
Adjust the values to see your result automatically.
So verwendest du CSS-Box-Shadow-Generator
Color CSS shadow generator builds a box-shadow declaration from horizontal and vertical offsets, blur, spread, a shadow color and an opacity from 0 to 1, with an optional inset shadow. It shows a live preview card and outputs a ready-to-copy CSS line that writes the color as rgba.
- Passe die Werte an; ein erstes Ergebnis wird aus den Standardwerten berechnet.
- Ändere die Grundeinstellungen oder öffne den Erweiterten Modus, um das Ergebnis fein abzustimmen.
- Prüfe dein Ergebnis und kopiere es oder lade es herunter. Pausiere Live-Ergebnisse, um manuell auszuführen. Quellen oder einzelne Einstellungen über 20.000 Zeichen erfordern eine explizite Ausführung.
Was dieses Tool unterstützt
Zeige einen CSS-Box-Shadow in der Vorschau an und kopiere den Code.
- Horizontaler Versatz (px)
- Set this value for your task.
- Vertikaler Versatz (px)
- Set this value for your task.
- Weichzeichnen (px)
- Range: 0 to 200
- Ausbreitung (px)
- Set this value for your task.
- Schattenfarbe
- Set this value for your task.
- Deckkraft
- Range: 0 to 1
- Inset
- Set this value for your task.
Grenzen und Verarbeitung
Verwende endliche Zahlen, gültige Datumsangaben und die in jedem Bedienelement angezeigten Bereiche. Ungültige Werte erzeugen einen Fehler ohne herunterladbares Ergebnis.
Beispielquelle
Hello ToolCabana
Häufige Fragen
How do I make an inset box shadow in CSS?
Turn on the Inset option. The generated declaration then starts with the inset keyword, and the preview card shows the shadow inside its edges instead of outside.
How do I set the transparency of a CSS shadow?
Use the Opacity slider, from 0 to 1 in steps of 0.01. The chosen color is converted to rgba with that alpha value, so the default of 0.15 gives a soft shadow.
What is the maximum blur for the shadow generator?
Blur accepts whole pixel values from 0 to 200. The horizontal and vertical offsets and spread can be negative, which moves or shrinks the shadow.
Wo wird meine Eingabe verarbeitet?
Dieser Vorgang verarbeitet seine Quelle in deinem Browser. Kopieren und Herunterladen sind ausdrückliche Aktionen; die Quelleingabe wird nicht in einem Konto oder Verlauf gespeichert.
Welche Eingabelimits gelten?
Verwende endliche Zahlen, gültige Datumsangaben und die in jedem Bedienelement angezeigten Bereiche. Ungültige Werte erzeugen einen Fehler ohne herunterladbares Ergebnis.