CSS-Box-Shadow-Generator
Realistische, glatte und geschichtete Schatten für Ihre UI-Elemente erstellen.
Versätze, Unschärfe, Ausbreitung und Farben visuell anpassen, dann CSS kopieren. 100% Kostenlos — Keine Registrierung erforderlich.
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15); Layers
Häufige Anwendungsfälle
Wo Schatten den größten Einfluss im UI-Design haben
Karten-Elevation
Tiefe zu Karten und Containern hinzufügen. Subtile Schatten erzeugen visuelle Hierarchie und lassen Inhalte hervorstechen.
Button-Zustände
Gedrückte/erhöhte Button-Effekte mit Inset-Schatten erstellen. Interaktive Zustandsänderungen klar zeigen.
Modal-Dialoge
Große, weiche Schatten für Modals und Popups erzeugen den Schwebeffekt und trennen sie vom Hintergrund.
Neumorphismus
Soft-UI-Designtrend mit hellen und dunklen Schatten, um geprägte, 3D-artige Interface-Elemente zu erstellen.
CSS Box Shadow verstehen
Die box-shadow-Eigenschaft fügt ein oder mehrere Schatteneffekte um den Rahmen eines Elements hinzu. Im Gegensatz zu text-shadow kann box-shadow Ausbreitungsradius und Inset-Option für innere Schatten haben.
Schatten-Eigenschaften
- Versatz X: Horizontale Entfernung. Positiv = rechts, negativ = links.
- Versatz Y: Vertikale Entfernung. Positiv = unten, negativ = oben.
- Unschärfe-Radius: Je größer dieser Wert, desto größer und heller der Schatten. Kann nicht negativ sein.
- Ausbreitungs-Radius: Positive Werte erweitern, negative verkleinern. Standard ist 0.
- Farbe: Schattenfarbe. Verwenden Sie rgba() für Transparenzkontrolle.
- Inset: Ändert Schatten von außen (Standard) zu innen. Erzeugt gedrückten Effekt.
Profi-Tipps für natürliche Schatten
- Verwenden Sie mehrere geschichtete Schatten für realistischere Tiefe.
- Passen Sie Schattenrichtung an Ihr Beleuchtungsmodell an.
- Subtile Schatten (niedrige Opazität, weiche Unschärfe) sehen professioneller aus.
- Vermeiden Sie reines Schwarz — verwenden Sie dunkle Grautöne oder getönte Schatten.
Code-Beispiele
Einsatzbereite Schatten-Beispiele für verschiedene UI-Muster
/* Simple shadow */
.card {
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* Layered shadow (smoother) */
.smooth-card {
box-shadow:
0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);
}
/* Large elevation */
.modal {
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25);
}/* Inset shadow (pressed state) */
.button-pressed {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
/* Neumorphism effect */
.neumorphic {
background: #e0e5ec;
box-shadow:
9px 9px 16px rgba(163,177,198,0.6),
-9px -9px 16px rgba(255,255,255,0.5);
}
/* Neumorphism pressed */
.neumorphic-pressed {
box-shadow:
inset 6px 6px 10px rgba(163,177,198,0.6),
inset -6px -6px 10px rgba(255,255,255,0.5);
}Häufig gestellte Fragen (FAQ)
Wie viele Schatten kann ich schichten?
Es gibt kein Limit! Trennen Sie jeden Schatten mit einem Komma. Geschichtete Schatten erzeugen realistischere Tiefe als einzelne schwere Schatten. Übliche Muster verwenden 2-4 Ebenen.
Wofür wird Inset-Schatten verwendet?
Inset-Schatten erscheinen innerhalb des Elements und erzeugen einen gedrückten oder eingetieften Look. Perfekt für Button-Gedrückt-Zustände, Eingabefelder oder Tiefe innerhalb von Containern.
Warum funktioniert mein Schatten nicht?
Häufige Probleme: Element hat overflow: hidden, das den Schatten abschneidet, Schattenfarbe entspricht dem Hintergrund, oder Elternelement schneidet ab. Prüfen Sie z-index und Elterncontainer.
Wie erstelle ich Neumorphismus-Effekt?
Verwenden Sie zwei Schatten: einen hellen versetzt nach oben-links und einen dunklen versetzt nach unten-rechts. Beide sollten weiche Unschärfe und Farben nahe dem Hintergrund verwenden.