DESIGN · CSS

CSS-Schatten erstellen

Stelle den Schatten einer Karte oder Schaltfläche ein und kopiere das CSS.

01 / EINGABE

Deine Einstellungen

Horizontal: 8 px

Vertikal: 12 px

Unschärfe: 24 px

Ausdehnung: 0 px

Schattenfarbe

Deckkraft: 35 %

Schatten nach innen

02 / VORSCHAU

Ergebnis

Deine Vorschau

03 / VERWENDEN

Fertiger CSS-Code

Hinweis

Schattendarstellung kann je nach Hintergrundfarbe unterschiedlich wirken.

CSS-Schatten sparsam einsetzen

Ein dezenter Schlagschatten kann Karten und Dialogfenster von ihrem Hintergrund abheben. Besonders wichtig sind Abstand, Unschärfe und Deckkraft: Ein zu dunkler Schatten wirkt schnell wie ein harter Rand.

Kontrolliere das Ergebnis auf hellen und dunklen Hintergründen. Für die eigentliche Bedienbarkeit sind gute Abstände und sichtbare Fokusmarkierungen wichtiger als dekorative Effekte.