Versatz einstellen
Bestimme mit X- und Y-Wert, in welche Richtung der Schatten fällt.
Box-Shadow-Generator
BOX SHADOW DESIGN TOOL
Schatten erstellen. Tiefe sichtbar machen.
Erstelle individuelle CSS-Schatten für Karten, Buttons, Bilder und moderne Webseiten. Passe Abstand, Unschärfe, Ausbreitung, Farbe und Transparenz direkt im Browser an.
Live Vorschau
2 Schatten kombinierbar
Inset möglich
CSS kopieren
SHADOW
CSS
3D
DEPTH
SO FUNKTIONIERT'S
In sechs Schritten zum perfekten Schatten
Der Generator ist auch für Einsteiger gedacht. Alle Änderungen werden sofort in der Vorschau und im fertigen CSS-Code übernommen.
Unschärfe wählen
Der Blur-Wert entscheidet, ob der Schatten hart oder weich wirkt.
Ausbreitung anpassen
Mit Spread kannst du den Schatten vergrößern oder enger an das Element ziehen.
Farbe & Deckkraft
Wähle eine Schattenfarbe und passe ihre Transparenz individuell an.
Live prüfen
Die Vorschau zeigt dir den Effekt sofort auf einer realistischen Designkarte.
CSS übernehmen
Kopiere den fertigen CSS-Code mit einem Klick direkt in dein Projekt.
◐
Was bedeuten X, Y, Blur und Spread?
Vier Werte bestimmen die Form eines klassischen CSS Box Shadows.
Negativ = links, positiv = rechts.
Negativ = oben, positiv = unten.
Je höher der Wert, desto weicher der Schatten.
Vergrößert oder verkleinert die Schattenfläche.
BOX SHADOW GENERATOR
Deinen Schatten zusammenstellen
Passe alle Werte direkt an. Die Vorschau und der CSS-Code aktualisieren sich sofort.
01
Einstellungen
Schatten, Farben und Form bestimmen.
SHADOW 01
Hauptschatten
0px
22px
55px
-12px
SCHATTENFARBE
Farbe
35%
SHADOW 02
Zusatzschatten
0px
5px
15px
-3px
SCHATTENFARBE
Farbe
18%
DESIGN
Vorschau anpassen
BOX
Elementfarbe
BACKGROUND
Flächenfarbe
24px
02
Live-Vorschau
So wirkt dein Schatten im Einsatz.
◇
SHADOW DESIGN
Mehr Tiefe. Mehr Wirkung.
Ein guter Schatten trennt Ebenen, lenkt den Blick und gibt deinem Design eine klare räumliche Struktur.
CSS OUTPUT
Fertiger Code
LIVE APPLICATIONS
So wirkt dein Schatten
Dein aktueller Shadow wird auch auf typischen Webdesign-Elementen dargestellt.
CREATIVE UI
Moderne Card
Design · Tiefe · Struktur
DESIGNS COMMUNITY
Schatten geben
deinem Design Tiefe.
SHADOW INSPIRATION
Fertige Presets ausprobieren
Ein Klick übernimmt die Schattenwerte direkt in den Generator.
SOFT
Soft Shadow
Dezenter, weicher Schatten für moderne Karten und Panels.
FLOAT
Floating Card
Starker Tiefeneffekt für schwebende Karten und Callouts.
DEEP
Deep Shadow
Kräftiger Schatten für markante 3D-Elemente.
GLOW
Neon Glow
Leuchtender Farbschatten für moderne Dark-Mode-Designs.
GLASS
Glass Shadow
Weicher Schatten für Glassmorphism und transparente Flächen.
MATERIAL
Material Lift
Klarer UI-Schatten für Buttons, Cards und Interface-Elemente.
Nicht zu dunkel
Für natürliche Schatten eignet sich häufig eine Deckkraft zwischen etwa 10 und 35 Prozent besser als reines Schwarz.
Mehrere Ebenen
Zwei unterschiedliche Schatten können deutlich realistischer wirken als ein einzelner sehr starker Schatten.
Lichtquelle beachten
Verwende auf einer Seite möglichst eine einheitliche Schattenrichtung. So wirkt das Design ruhiger und glaubwürdiger.
DEIN SHADOW. DEIN DESIGN.
Schatten gefunden?
Kopiere den fertigen CSS-Code und verwende ihn direkt auf deiner Webseite, in deinem Forum oder in deinem nächsten Designprojekt.
Kopiert