Mit dem CSS box-shadow-Generator erstellst du Schlagschatten für Buttons, Karten und andere Elemente, ohne die CSS-Syntax auswendig zu kennen. Du stellst Versatz, Weichzeichnen, Ausbreitung, Farbe und Deckkraft per Regler ein und siehst den Schatten sofort in einer Live-Vorschau. Darunter steht die passende box-shadow-Zeile, die du direkt in dein Stylesheet kopierst.
So funktioniert der CSS box-shadow-Generator
Sechs Regler steuern den Schatten: Horizontal und Vertikal verschieben ihn seitlich beziehungsweise nach oben oder unten (je −50 bis 50 px), Weichzeichnen (0 bis 100 px) bestimmt die Unschärfe am Rand, und Ausbreitung (−50 bis 50 px) vergrößert oder verkleinert die Schattenfläche zusätzlich zur eigentlichen Box. Dazu wählst du eine Farbe und ihre Deckkraft in Prozent.
Jede Änderung aktualisiert die Vorschau sofort. Darunter erscheint der passende CSS-Code als fertige box-shadow-Zeile zum Kopieren.
So wird der CSS-Code erzeugt
Die Eigenschaft box-shadow folgt dem Muster box-shadow: X Y Blur Spread Farbe;. Ein positiver Wert bei Horizontal schiebt den Schatten nach rechts, ein positiver Wert bei Vertikal nach unten – negative Werte entsprechend nach links beziehungsweise oben. Deine Hex-Farbe wandelt der Generator automatisch in rgba(r, g, b, a) um: Die Deckkraft in Prozent wird dabei auf einen Dezimalwert zwischen 0 und 1 umgerechnet, zum Beispiel 25 % → 0.25.
Beispiel
Mit den Standardwerten Horizontal 0, Vertikal 10, Weichzeichnen 20, Ausbreitung 0, Farbe #1a2233 und Deckkraft 25 % erzeugt der Generator: box-shadow: 0px 10px 20px 0px rgba(26, 34, 51, 0.25);. Die Hex-Farbe #1a2233 entspricht dabei Rot 26, Grün 34, Blau 51. Der Schatten liegt also 10 px unterhalb des Elements, wird über 20 px hinweg weich ausgeblendet, ohne zusätzliche Ausbreitung – ein dezenter, leicht transparenter Kartenschatten.
Wofür brauche ich das?
Ein box-shadow gibt flachen Weboberflächen optische Tiefe: Karten wirken, als würden sie leicht über dem Hintergrund schweben, Buttons erhalten beim Hover mehr Kontur, und Dialogfenster heben sich sichtbar vom übrigen Inhalt ab. Mit negativer Ausbreitung und starkem Weichzeichnen entstehen weiche, kaum sichtbare Schatten, mit positiver Ausbreitung und wenig Weichzeichnen dagegen kräftige, klar umrissene.