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.

Design-Tool

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.

100% kostenlos — kein Konto erforderlich

Voreinstellungen

Schattenebenen

H-Versatz: 0

-5050

V-Versatz: 4

-5050

Unschärfe: 12

0100

Ausbreitung: 0

050

Farbe

Deckkraft: 15%

Inset

Vorschau

Generiertes CSS

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Visueller Schatten-Designer

Pixelgenaue Schatten ohne CSS-Werte raten

Intuitive Steuerung

Regler für horizontalen/vertikalen Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft.

Mehrere Schatten

Mehrere Schattenebenen für komplexe, realistische Effekte überlagern.

5 Vorlagen

Subtil, Mittel, Schwer, Schwebend und Innen-Leuchten als Startpunkte.

CSS kopieren

Ein-Klick-Kopie der generierten box-shadow CSS-Eigenschaft.

Häufig gestellte Fragen

Design-Tools

Beeindruckende visuelle Inhalte erstellen

Schöne Schatten in Ihren Social-Media-Grafiken verwenden.