Kostenloser CSS-Box-Shadow-Generator
CSS-Box-Shadows visuell mit Reglern für Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft gestalten. Mehrere Schatten überlagern und aus Vorlagen wählen. Generiertes CSS kopieren. Keine Anmeldung erforderlich.
100% kostenlos — kein Konto erforderlich
Vorschau
Generiertes CSS
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);Funktionen von Kostenloser CSS-Box-Shadow-Generator
Pixelgenaue Schatten ohne CSS-Werte raten
CSS kopieren
Ein-Klick-Kopie der generierten box-shadow CSS-Eigenschaft.
Mehrere Schatten
Mehrere Schattenebenen für komplexe, realistische Effekte überlagern.
5 Vorlagen
Subtil, Mittel, Schwer, Schwebend und Innen-Leuchten als Startpunkte.
Intuitive Steuerung
Regler für horizontalen/vertikalen Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft.
Häufig gestellte Fragen
Was bedeuten die Schattenwerte?
Horizontaler Versatz bewegt den Schatten links/rechts, vertikaler bewegt hoch/runter, Unschärfe steuert die Weichheit, Ausbreitung steuert die Größe und Farbe legt die Schattenfarbe fest.
Was ist ein Inset-Schatten?
Ein Inset-Schatten erscheint innerhalb des Elements statt außerhalb und erzeugt einen gedrückten oder eingelassenen Effekt.
Wie viele Schattenebenen kann ich verwenden?
CSS unterstützt unbegrenzte Schattenebenen. Dieses Tool lässt Sie mehrere hinzufügen. Gängige Designs verwenden 1-3 Ebenen für subtile, realistische Tiefe.
Beeindruckende visuelle Inhalte erstellen
Schöne Schatten in Ihren Social-Media-Grafiken verwenden.