CSS-Tools/Box Shadow Generator
Box Shadow Generator
Erstellen Sie beeindruckende Box-Schatten mit mehreren Ebenen und Echtzeit-Vorschau
Vorschau
#F8FAFC
Schatten-Ebenen
Ebene 1
#0000001a
0px
4px
6px
-1px
Ebene 2
#0000001a
0px
2px
4px
-2px
Presets
Loading...Box-Schatten Anleitung
Lernen Sie, Tiefe und Dimension mit CSS-Schatten zu erstellen
Was ist Box-Schatten?
CSS box-shadow fügt Schatten-Effekte um den Rahmen eines Elements hinzu. Sie können mehrere Schatten, Innen-/Außenschatten erstellen und Unschärfe, Ausbreitung und Farbe für realistische Tiefeneffekte steuern.
Verwendung
- Passen Sie die X- und Y-Offset-Werte für die Schattenposition an
- Stellen Sie Unschärfe und Ausbreitung für weiche oder scharfe Kanten ein
- Wählen Sie die Schattenfarbe und Deckkraft
- Fügen Sie mehrere Schichten für komplexe Effekte hinzu
Profi-Tipps
- Verwenden Sie Inset-Schatten für gedrückte Tasteneffekte
- Kombinieren Sie mehrere Schatten für realistischere Tiefe
- Subtile Schatten sehen oft professioneller aus als dramatische
Browser-Unterstützung
Box-shadow wird in allen modernen Browsern vollständig unterstützt. Keine Herstellerpräfixe erforderlich. Die Eigenschaft funktioniert konsequent in Chrome, Firefox, Safari und Edge.
Häufig gestellte Fragen
Was ist der Unterschied zwischen Box-Shadow und Drop-Shadow?
box-shadow wendet einen Schatten auf die gesamte Box des Elements (einschließlich Rahmen) an und behält eine rechteckige Form bei. drop-shadow ist Teil der filter-Eigenschaft und folgt der tatsächlichen Form des Elements (einschließlich transparenter Bereiche). Für PNG-Bilder oder unregelmäßige Formen ist drop-shadow besser geeignet.
Wie wende ich mehrere Schatten an?
In CSS werden mehrere Schatten durch Kommas getrennt in einer box-shadow-Eigenschaft deklariert. Beispiel: 'box-shadow: 2px 2px 4px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.1);'. Der zuerst deklarierte Schatten wird oben angezeigt, und die Kombination mehrerer Ebenen erzeugt realistischere Tiefe.
Wann verwendet man Inset-Schatten?
Das Hinzufügen des inset-Schlüsselworts zeigt den Schatten innerhalb des Elements an und erzeugt einen eingedrückten Effekt. Es wird häufig für Eingabefelder, gedrückte Tastenzustände und Neumorphismus-Design verwendet. Die Kombination von äußeren und inneren Schatten kann dreidimensionale UI-Elemente erzeugen.
Wie wähle ich die Schattenfarbe?
Für natürliche Schatten verwenden Sie dunkle Farben mit Transparenz anstelle von reinem Schwarz (#000). Der Bereich rgba(0, 0, 0, 0.1~0.3) ist üblich. Bei farbenfrohen Designs kann die Verwendung einer dunkleren Variante der gleichen Farbfamilie wie der Hintergrund harmonische Schatten erzeugen.
Beeinflusst Box-Shadow die Leistung?
Das Anwenden komplexer Schatten (insbesondere mit großen Blur-Werten) auf viele Elemente kann die Rendering-Leistung beeinträchtigen. Vermeiden Sie das Ändern von Schatten während des Scrollens oder bei Animationen, und verwenden Sie nach Möglichkeit die will-change-Eigenschaft oder stattdessen Schattenbilder.