CSS-Box-Shadow-Generator
Baue einen box-shadow, indem du Regler verschiebst und das Ergebnis auf einer Karte siehst. Stapele bis zu sechs Ebenen für weichere, realistischere Schatten, nutze inset für eingedrückte Effekte und starte mit Vorlagen wie weich, schwebend, Glühen oder Neumorphismus. Kopiere das CSS mit einem Klick.
So wird er benutzt
- Wähle eine Vorlage oder stelle Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft des Schattens ein.
- Füge Ebenen mit + hinzu und wähle jede einzelne zum Bearbeiten aus; ändere Hintergrund, Boxfarbe und Eckenradius passend zu deinem Design.
- Kopiere das CSS und füge es in die Regel des Elements ein.
Häufige Fragen
Was bewirken Unschärfe und Ausbreitung?
Die Unschärfe macht den Rand des Schattens weicher; bei null ist der Rand scharf. Die Ausbreitung vergrößert den Schatten vor dem Weichzeichnen in alle Richtungen, eine negative Ausbreitung verkleinert ihn, was hilft, dass ein großer, unscharfer Schatten unter dem Element bleibt.
Warum mehrere Schattenebenen?
Echte Schatten sind nahe am Objekt dunkler und werden weiter entfernt schwächer. Ein kleiner, scharfer Schatten kombiniert mit einem größeren, weicheren ahmt das nach und wirkt natürlicher als ein einzelner Schatten. Die erste Ebene in der Liste wird zuoberst gezeichnet.
Macht box-shadow eine Seite langsamer?
Bei normaler Nutzung nicht. Sehr große Unschärfen bei vielen Elementen oder das Animieren des Schattens selbst können auf langsamen Smartphones Leistung kosten; zum Animieren änderst du besser die Deckkraft eines Pseudo-Elements, das den Schatten trägt.
🏷️ Meta-Tag-Generator
🖼️ Open-Graph-Generator
🔗 UTM-Link-Generator
🌈 CSS-Farbverlauf-Generator