Box-Shadow-Generator
Der Box Shadow Generator erstellt einen CSS box-shadow mit Reglern für X- und Y-Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und inset – plus Vorlagen für Material Design und Tailwind – und gibt das exakte CSS aus.
Über dieses Tool
Der Box Shadow Generator erstellt einen CSS box-shadow mit Reglern für X- und Y-Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und inset – plus Vorlagen für Material Design und Tailwind – und gibt das exakte CSS aus.
So funktioniert’s
- Starte mit einer Vorlage oder bleib bei „Benutzerdefiniert“.
- Passe X-/Y-Versatz, Unschärfe, Ausdehnung und Deckkraft an.
- Wähle die Schattenfarbe und aktiviere „Inset“ für einen Innenschatten.
- Klicke auf „CSS kopieren“, um die box-shadow-Regel einzufügen.
Gut zu wissen
- Die Syntax von box-shadow lautet: [inset] offset-x offset-y blur-radius spread-radius color.
- Ein größerer Unschärferadius macht die Kante weicher; spread lässt den Schatten vor dem Weichzeichnen wachsen oder schrumpfen.
- Dunkle Schatten mit geringer Deckkraft (etwa 10–25 %) wirken natürlicher als sattes Schwarz.
- Mehrere Schatten lassen sich durch Kommas getrennt übereinanderlegen.
- Das Schlüsselwort inset zeichnet den Schatten innerhalb des Rahmens des Elements.
Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.
Häufige Fragen
Wie füge ich einem div in CSS einen Schatten hinzu?
Verwende die Eigenschaft box-shadow, zum Beispiel box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); – dieses Tool schreibt dir den Wert.
Was ist der Unterschied zwischen blur und spread?
Blur bestimmt, wie weich die Schattenkante ist. Spread vergrößert oder verkleinert den Schatten, bevor die Unschärfe angewendet wird.
Wie erstelle ich einen Innenschatten?
Setze das Schlüsselwort inset an den Anfang des Werts oder aktiviere „Inset“ im Tool.
Kann ich mehrere Box-Shadows verwenden?
Ja. Trenne die Schatten mit Kommas; geschichtete Schatten wie bei den Vorlagen für Material und Tailwind wirken realistischer.