Passe den Schatten an
Verschiebe die Regler für horizontalen und vertikalen Versatz, Unschärfe und Ausdehnung.
CSS-Box-Shadow-Generator
Gestalte einen box-shadow mit Live-Schiebereglern für Versatz, Unschärfe, Ausdehnung und Deckkraft und kopiere dann das CSS.
Kostenlos
Keine Registrierung
Läuft in deinem Browser
Verschiebe die Regler; die Vorschau aktualisiert sich sofort.
Brauchst du auch einen Hintergrund? Nutze den CSS-Verlaufsgenerator.Häufige Anwendungen
- Karten und Buttons einen weichen, modernen Schatten geben
- Einen vertieften Effekt für Eingabefelder erstellen
- Einen Schatten aus einem Design-Entwurf nachbauen
So funktioniert es
So erstellst du einen CSS-box-shadow
Wähle Farbe und Deckkraft
Wähle die Schattenfarbe und ihre Stärke oder wechsle zu einem inneren Schatten.
Kopiere das CSS
Kopiere die box-shadow-Regel und füge sie in dein Stylesheet ein.
FAQ
Gut zu wissen
Wie verwende ich den CSS-box-shadow-Generator?
1. Passe den Schatten an: Verschiebe die Regler für horizontalen und vertikalen Versatz, Unschärfe und Ausdehnung. 2. Wähle Farbe und Deckkraft: Wähle die Schattenfarbe und ihre Stärke oder wechsle zu einem inneren Schatten. 3. Kopiere das CSS: Kopiere die box-shadow-Regel und füge sie in dein Stylesheet ein.
Was ist der Unterschied zwischen Unschärfe und Ausdehnung?
Die Unschärfe macht den Rand des Schattens weicher. Die Ausdehnung macht den Schatten größer oder, mit einem negativen Wert, kleiner als das Element.
Warum eine niedrige Deckkraft verwenden?
Weiche Schatten mit etwa 10–25% Deckkraft wirken natürlicher als reines Schwarz.
Beeinflusst box-shadow das Layout?
Nein. Schatten werden außerhalb des Layouts gezeichnet und verschieben keine anderen Elemente.
Weiterarbeiten