Wie box-shadow funktioniert
Die CSS-Eigenschaft box-shadow zeichnet einen oder mehrere Schatten um ein Element. Jede Schattenebene besteht aus horizontalem Versatz (X), vertikalem Versatz (Y), Unschärfe (Blur), Ausdehnung (Spread) und Farbe. Mit dem Schlüsselwort inset liegt der Schatten innen statt außen, das Element wirkt dann eingedrückt.
Im Generator stellen Sie jeden dieser Werte per Regler ein, dazu die Deckkraft der Schattenfarbe. Realistische Schatten entstehen selten aus einer einzigen Ebene: Ein enger, dunklerer Schatten für den Kontakt und ein weiter, sehr transparenter für das Umgebungslicht wirken natürlicher. Deshalb können Sie beliebig viele Ebenen anlegen und kombinieren, auch äußere und innere Schatten zusammen.
Vorlagen für weiche, erhöhte, scharfe und innere Schatten sowie einen Neumorphism-ähnlichen Effekt geben einen schnellen Ausgangspunkt. Die Vorschau zeigt den Schatten auf einer Box, deren Farbe und Hintergrund Sie ändern können, denn ein Schatten wirkt auf hellem Grund ganz anders als auf dunklem. Ein häufiger Fehler sind zu dunkle, zu harte Schatten in reinem Schwarz. Natürlicher wirken Schatten mit geringer Deckkraft, etwa 10 bis 20 Prozent, und mit einem leichten Farbton aus dem Hintergrund statt reinem Schwarz. Je höher ein Element über der Fläche schweben soll, desto größer werden Versatz und Unschärfe. Für ein einheitliches Design legen Sie am besten wenige Schattenstufen fest, zum Beispiel für Karten, Dropdowns und Dialoge, und verwenden diese überall. Auf dunklen Oberflächen sind Schatten kaum sichtbar; dort helfen hellere Ränder oder hellere Flächen.
Der Generator läuft in Ihrem Browser und ist kostenlos ohne Begrenzung nutzbar: Live-Vorschau und Kopieren des box-shadow-Codes stehen ohne Pro zur Verfügung.
So erstellen Sie einen Box Shadow
- Mit einer Vorlage beginnen oder eine leere Schattenebene nutzen.
- Versatz X und Y, Unschärfe, Ausdehnung, Farbe und Deckkraft einstellen; bei Bedarf inset aktivieren.
- Weitere Ebenen hinzufügen, um den Schatten realistischer zu machen.
- Box- und Hintergrundfarbe der Vorschau an Ihr Design anpassen.
- CSS kopieren und einfügen.
Typische Einsatzzwecke
- Karten und Panels mit Tiefe versehen.
- Hover-Effekte für Buttons mit stärkerem Schatten.
- Modale Dialoge und Dropdowns vom Hintergrund abheben.
- Eingabefelder mit inneren Schatten gestalten.
- Neumorphism-Oberflächen mit hellem und dunklem Schatten.
- Fokus-Ringe ohne Layout-Verschiebung mit Spread und ohne Blur.
Die Werte im Detail
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15): weicher Schatten nach unten.
- Unschärfe: 0 ergibt eine harte Kante, größere Werte einen weicheren Übergang.
- Ausdehnung: positive Werte vergrößern den Schatten, negative verkleinern ihn, nützlich für Schatten nur an einer Seite.
- inset 0 2px 4px rgba(0, 0, 0, 0.2): eingedrückter Effekt.
- Mehrere Ebenen werden durch Kommas getrennt; die erste Ebene liegt oben.
Häufig gestellte Fragen
Ist der Box Shadow Generator kostenlos?
Ja, ohne Begrenzung. Vorschau und Kopieren des CSS sind frei, Pro wird dafür nicht benötigt.
Was ist der Unterschied zwischen Blur und Spread?
Blur macht die Kante des Schattens weich, Spread vergrößert oder verkleinert den Schatten insgesamt.
Kann ich mehrere Schatten kombinieren?
Ja, beliebig viele Ebenen, auch innere und äußere zusammen.
Beeinflusst box-shadow das Layout?
Nein. Schatten nehmen keinen Platz ein und verschieben keine anderen Elemente.
Wie mache ich einen Schatten nur unten?
Mit positivem Y-Versatz und negativem Spread, zum Beispiel 0 8px 6px -6px.