CSS Box Shadow Generator
Erstellen Sie mehrstufige CSS-Schatteneffekte visuell mit Live-Vorschau. Passen Sie Versätze, Unschärfe, Ausbreitung, Farbe und Deckkraft an — kopieren Sie dann den einsatzbereiten CSS-Wert.
CSS Box Shadow Generator
Live-Vorschau
CSS-Ausgabe
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.20);Was ist CSS box-shadow?
Die CSS-Eigenschaft box-shadow fügt einen oder mehrere Schatteneffekte zum Rahmen eines Elements hinzu. Jeder Schatten wird durch seinen horizontalen und vertikalen Versatz, den Unschärfe-Radius, den Ausbreitungs-Radius, die Farbe und ein optionales inset-Schlüsselwort definiert, das den Schatten in das Element verschiebt.
Mehrstufige Schatteneffekte
Sie können mehrere Schattenebenen stapeln, um Tiefeneffekte, Glüheffekte oder simulierte Grenzen zu erreichen. Ebenen werden von hinten nach vorne gerendert, daher erscheint der erste Schatten in der Liste oben.
Verwendungsanleitung
- Klicken Sie auf 'Schatten hinzufügen', um eine Schattenebene zu erstellen.
- Passen Sie die Versätze, Unschärfe, Ausbreitung, Farbe und Deckkraft mit den Schiebereglern an.
- Schalten Sie 'Inset' um, um einen inneren Schatten zu erstellen.
- Fügen Sie weitere Ebenen hinzu, um komplexe Effekte zu erzielen.
- Kopieren Sie den Wert oder die vollständige Deklaration in die Zwischenablage.
Ihre Daten bleiben in Ihrem Browser — keine Daten werden an einen Server übertragen.
Häufig gestellte Fragen
- Was ist der Unterschied zwischen Unschärfe und Ausbreitung?
- Der Unschärfe-Radius steuert, wie weich die Schattenränder sind — ein höherer Wert erzeugt einen diffuseren Schatten. Der Ausbreitungs-Radius vergrößert oder verkleinert die Schattengröße über das Begrenzungsfeld des Elements hinaus, ohne die Weichheit zu beeinflussen.
- Was bewirkt das inset-Schlüsselwort?
- Inset verschiebt den Schatten in das Element, anstatt nach außen. Dies ist nützlich zum Erstellen von gedrückten oder vertieften UI-Effekten.
- Kann ich mehrere Schatteneffekte verwenden?
- Ja. CSS box-shadow akzeptiert eine kommagetrennte Liste von Schattendefinitionen. Jede Ebene ist unabhängig und wird von hinten nach vorne zusammengefügt.
- Ist die Ausgabe browserübergreifend kompatibel?
- Die box-shadow-Eigenschaft wird in allen modernen Browsern ohne Herstellerpräfixe vollständig unterstützt. Kein -webkit- oder -moz--Präfix ist erforderlich.