CSS Box-Shadow-Generator — Kostenlos Online
Erstellen Sie CSS-Schatten visuell mit Steuerelementen für Versatz, Weichzeichner, Ausbreitung und Farbe.
Who uses the CSS Box-Shadow-Generator?
- UI-Entwickler, die Karten- und Button-Schatten passend zu ihren Design-System-Spezifikationen erzeugen.
- CSS-Lernende, die Schatteneigenschaften über eine visuelle Oberfläche mit sofortigem Feedback erkunden.
- Designer, die Schatteneffekte für Mockups erstellen und testen, bevor sie an Entwickler übergeben werden.
How the CSS Box-Shadow-Generator works
Passen Sie die Regler für X-Versatz, Y-Versatz, Weichzeichnungsradius und Streuungsradius an, um Ihren Schatten zu formen.
Klicken Sie auf das Farbfeld, um eine Schattenfarbe zu wählen, und nutzen Sie den daneben liegenden Deckkraft-Regler.
Aktivieren Sie Inset für einen inneren Schatteneffekt.
Kopieren Sie das CSS aus dem Code-Ausgabefeld.
Tips & tricks
- Dieses Tool erzeugt eine einzelne Schattenebene — für einen mehrschichtigen Effekt (wie Material-Design-Elevation) erzeugen Sie jede Ebene hier separat und kombinieren sie manuell mit Kommas.
- Negative Streuung mit größerer Weichzeichnung erzeugt einen weichen, diffusen Schatten, der „schwebender“ wirkt als ein Schatten mit engem positivem Streuungswert.
- Innere Schatten eignen sich gut für gedrückte Button-Zustände — versuchen Sie eine kleine Weichzeichnung mit einer dunklen, wenig deckenden Farbe.
- Der Deckkraft-Regler steuert den Alphakanal der Schattenfarbe, nicht die Deckkraft des Elements selbst.
Frequently Asked Questions
Was ist die CSS-box-shadow-Syntax?
box-shadow: [inset] X-Versatz Y-Versatz Weichzeichnungsradius Streuungsradius Farbe. Beispiel: box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1). Mehrere Schatten werden durch Kommas getrennt.
Was bewirkt der Streuungsradius?
Der Streuungsradius vergrößert oder verkleinert den Schatten vor der Weichzeichnung. Positive Werte lassen den Schatten größer als das Element werden; negative Werte verkleinern ihn. Eine Streuung von -4px mit 8px Weichzeichnung erzeugt einen fokussierten, gerichteten Schatten.
Was ist ein innerer Schatten (inset)?
Das Aktivieren der Inset-Checkbox lässt den Schatten innerhalb des Elementrahmens statt außerhalb erscheinen. Innere Schatten erzeugen gedrückte/eingedrückte Button-Zustände, eingelassene Karten-Effekte und inneres Leuchten.
Kann dieses Tool mehrere gestapelte Schattenebenen erzeugen, wie Material-Design-Elevation?
Nein — dieses Tool erzeugt jeweils eine Schattenebene. Für einen mehrschichtigen Effekt wie Material-Design-Elevation (box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0px rgba(0,0,0,0.14), 0 1px 10px 0px rgba(0,0,0,0.12)) erzeugen Sie jede Ebene hier separat und kombinieren die durch Kommas getrennten Werte manuell.
Beeinflusst box-shadow das Layout und beansprucht es Platz?
Nein. Anders als margin oder padding beeinflusst box-shadow nicht das Layout — Elemente mit Schatten drängen benachbarte Elemente nicht weg. Das macht Schatten sicher hinzufügbar, ohne das Seitenlayout zu stören.
Is my data safe when using the CSS Box-Shadow-Generator?
Completely safe. The CSS Box-Shadow-Generator processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the CSS Box-Shadow-Generator output in commercial projects?
Yes. The CSS Box-Shadow-Generator is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the CSS Box-Shadow-Generator follow official standards?
Yes. The CSS Box-Shadow-Generator is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.