Box Shadow Generator
Erzeugt einen fertigen CSS box-shadow aus deinen Werten.
Dieses Tool ist für Mitglieder
Dieses Premium-Tool schaltest du mit einem kostenlosen Konto frei — zusammen mit allen anderen Profi-Tools und den ganzen Wissen-Artikeln.
100 % kostenlos · keine Kreditkarte · sofort freigeschaltet
Wozu dient der Box Shadow Generator?
Der Box Shadow Generator erstellt fertigen CSS-Code für Schlagschatten von Elementen. Praktisch für Webentwickler und Designer, die Karten, Buttons oder Modals mit Tiefe versehen wollen, ohne die box-shadow-Syntax auswendig zu kennen.
Du stellst X- und Y-Versatz, Weichzeichnen (Blur), Spread und die Deckkraft des Schattens ein. Der Generator gibt dir die fertige box-shadow-Eigenschaft zum Kopieren aus. So findest du den passenden Schatten durch Ausprobieren. Die Berechnung läuft komplett in deinem Browser.
Beispiele
- Versatz 0/4 px, Blur 6 px, Spread 0 px, Deckkraft 15 %: ergibt box-shadow: 0 4px 6px 0 rgba(0,0,0,0.15), ein dezenter Kartenschatten.
- Versatz 0/10 px, Blur 25 px, Deckkraft 20 %: ein weicher, ausladender Schatten für schwebende Elemente.
- Versatz 2/2 px, Blur 2 px, Deckkraft 30 %: ein harter, kompakter Schatten für einen Button.
Häufige Fragen zum Box Shadow Generator
Was bewirken Blur und Spread?
Blur macht den Schatten weicher und diffuser, je höher der Wert. Spread vergrößert oder verkleinert die Schattenfläche, bevor der Blur wirkt.
Wie erzeuge ich einen inneren Schatten?
Dafür wird das Schlüsselwort inset vor die Werte gesetzt. Du kannst es im generierten Code einfach ergänzen, um den Schatten nach innen zu legen.
Kann ich mehrere Schatten kombinieren?
Ja, in CSS lassen sich mehrere box-shadow-Werte durch Komma getrennt angeben. Generiere die Schatten einzeln und füge sie zusammen.
Werden meine Eingaben gespeichert?
Nein. Alle Berechnungen laufen ausschließlich im Browser. Es werden keine Daten gesendet oder gespeichert.
Ist das Tool kostenlos?
Ja, vollständig kostenlos und ohne Registrierung.
