CSS Box Shadow Generator
Schattenebenen
Mindestens eine Ebene ist erforderlich.
CSS-Ausgabe
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.25);Verwandte externe Tools
Einige Links sind Affiliate-Links.
Verwandte Tools
Gestalten Sie eine CSS-box-shadow visuell und kopieren Sie den Code mit einem Klick. Ziehen Sie die Regler für Versatz, Unschärfe, Ausdehnung, Farbe und Deckkraft, während die großflächige Live-Vorschau sofort aktualisiert wird. Stapeln Sie mehrere Schattenebenen, wechseln Sie jede Ebene zu einem inneren Schatten (inset) und starten Sie mit fertigen Presets. Alles läuft in Ihrem Browser — es werden keine Daten hochgeladen.
So wird's gemacht
- Bewegen Sie die Regler für Versatz X/Y, Unschärfe und Ausdehnung und beobachten Sie die Live-Vorschau.
- Wählen Sie eine Schattenfarbe und passen Sie die Deckkraft an.
- Fügen Sie weitere Ebenen für mehr Tiefe hinzu oder wandeln Sie eine Ebene in einen inneren Schatten (inset) um.
- Kopieren Sie das box-shadow-CSS oder wechseln Sie zum Tailwind-Tab für einen Utility-Wert.
Die box-shadow-Eigenschaften im Überblick
Eine CSS-box-shadow wird so geschrieben: Versatz X, Versatz Y, Unschärfe, Ausdehnung, Farbe — mit dem optionalen Schlüsselwort inset. Mehrere Schatten können durch Kommas getrennt aufgelistet werden.
Versatz X & Y
Versatz X verschiebt den Schatten horizontal, Versatz Y vertikal. Positive Werte schieben den Schatten nach rechts und unten; negative Werte nach links und oben.
Unschärfe-Radius
Die Unschärfe weicht die Kanten des Schattens auf. 0 ergibt eine harte, scharfe Kante; größere Werte erzeugen einen weichen, diffusen Schatten. Der Wert kann nicht negativ sein.
Ausdehnungs-Radius
Die Ausdehnung vergrößert (positiv) oder verkleinert (negativ) den Schatten, bevor die Unschärfe angewendet wird. Ein leicht negativer Wert eignet sich gut für subtile, eng anliegende Schatten.
Inset (innerer Schatten)
Das Schlüsselwort inset zeichnet den Schatten innerhalb des Elements statt außerhalb — ideal für gedrückte Schaltflächen, Eingabefelder und innere Tiefeneffekte.
Farbe und Deckkraft
Schatten wirken mit einer halbtransparenten dunklen Farbe meistens natürlicher als mit reinem Schwarz. Reduzieren Sie die Deckkraft für einen realistischen Effekt.
Funktionen
Mehrere Schattenebenen
Stapeln Sie mehrere Schatten auf einem Element. Die Kombination eines engen, dunklen Schattens mit einem breiteren, weicheren ist das Geheimnis realistischer, ausgearbeiteter Tiefe.
Innere Schatten
Schalten Sie jede Ebene auf einen inneren Schatten um, um gedrückte, gravierte oder vertiefte Effekte zu erzielen — perfekt für Schaltflächen und Formularfelder.
Fertige Presets
Starten Sie mit Material-Elevationsstufen, weichen oder harten Schatten, Neumorphism oder einem farbigen Leuchten und verfeinern Sie nach Belieben.
Hell- und Dunkel-Vorschau
Wechseln Sie den Vorschauhintergrund zwischen hell und dunkel, um zu prüfen, wie der Schatten auf verschiedenen Oberflächen wirkt.
Ein-Klick-Kopieren (CSS oder Tailwind)
Kopieren Sie eine fertige box-shadow-Deklaration zum direkten Einfügen oder holen Sie sich einen Tailwind-Arbitrary-Value wie shadow-[…] für Utility-First-Projekte.
Häufige Anwendungsfälle
Karten und Container
Geben Sie Karten mit einem weichen, wenig deckenden Schatten eine leichte Erhebung, damit Inhalte gruppiert und schwebend wirken.
Schaltflächen und Hover-Zustände
Fügen Sie Schaltflächen einen subtilen Schatten hinzu, beim Hover einen größeren, oder nutzen Sie einen inset-Schatten, um den Druckeffekt zu simulieren.
Neumorphism
Kombinieren Sie einen hellen und einen dunklen Schatten auf gegenüberliegenden Seiten, um den weichen, extrudierten Neumorphism-Look zu erzielen.
Leuchten und Fokus-Ringe
Verwenden Sie einen farbigen Schatten ohne Versatz, aber mit etwas Ausdehnung, um einen Leuchteffekt oder einen barrierefreien Fokus-Highlight zu erstellen.
Hinweise und Tipps
- Viele große, unscharfe Schatten können die Rendering-Leistung beeinträchtigen — sparsam bei animierten oder scrollenden Elementen einsetzen.
- Sehr große Unschärfe-Werte sind am teuersten zu rendern; bevorzugen Sie das Stapeln kleinerer Schatten für mehr Realismus.
- Achten Sie auf ausreichend Kontrast, damit Schatten dezent bleiben und die Lesbarkeit nicht beeinträchtigen.
- Inset-Schatten werden innerhalb des Elements gezeichnet und überschreiten dessen Border-Box nicht.
Häufig gestellte Fragen
- Was ist der Unterschied zwischen box-shadow und filter: drop-shadow?
- box-shadow folgt der rechteckigen Border-Box des Elements (unter Berücksichtigung von border-radius), während drop-shadow der tatsächlichen Form folgt, einschließlich transparenter PNGs und unregelmäßiger Formen. Dieses Tool generiert box-shadow.
- Kann ich einem Element mehrere Schatten hinzufügen?
- Ja. CSS erlaubt das Auflisten mehrerer Schatten durch Kommas getrennt, und dieser Generator ermöglicht das Stapeln mehrerer Ebenen. Das Kombinieren von Schatten ist der Schlüssel zu realistischer Tiefe.
- Was ist ein inset-Schatten?
- Ein inset-Schatten wird innerhalb des Elements gezeichnet statt außerhalb. Er eignet sich für gedrückte Schaltflächen, Eingabefelder und vertiefte Oberflächen. Aktivieren Sie die Inset-Option auf einer beliebigen Ebene.
- Verlangsamen box-shadows meine Seite?
- Einige statische Schatten sind kein Problem. Große, stark unscharfe Schatten sind teurer zu rendern — setzen Sie sie bei animierten oder häufig neu gezeichneten Elementen daher behutsam ein.
- Werden meine Daten hochgeladen?
- Nein. Der Generator läuft vollständig in Ihrem Browser. Es wird nichts an einen Server gesendet, und es ist keine Anmeldung erforderlich.