DevTulz Online

CSS Box Shadow Generator

Hintergrund

Was ist CSS Box Shadow?

Die CSS-Eigenschaft box-shadow fügt Schatteneffekte um den Rahmen eines Elements hinzu. Schatten können versetzt, unscharf gemacht, ausgebreitet, eingefärbt und als Inset (innerer Schatten) festgelegt werden. Mehrere durch Kommas getrennte Schatten können für reichhaltige Effekte gestapelt werden. Dieser Generator ermöglicht es Ihnen, komplexe mehrschichtige Schatten visuell zu erstellen und das fertige CSS in die Zwischenablage zu kopieren.

So verwenden Sie den Box Shadow Generator

  1. Passen Sie die Regler für Offset X/Y, Blur und Spread an, um den Schatten zu positionieren und zu formen.

  2. Klicken Sie auf das Farbfeld, um eine Schattenfarbe auszuwählen, und verwenden Sie den Opacity-Regler für Transparenz.

  3. Schalten Sie 'Inset' ein, um einen inneren Schein oder einen gedrückten Effekt zu erstellen.

  4. Klicken Sie auf '+ Ebene hinzufügen', um mehrere Schatten übereinander zu stapeln.

  5. Kopieren Sie das generierte CSS und fügen Sie es in Ihr Stylesheet ein.

Häufig Gestellte Fragen

Was ist der Unterschied zwischen box-shadow und drop-shadow Filter? box-shadow fügt Schatten um den rechteckigen Rahmen des Elements hinzu und unterstützt innere Schatten. Das CSS-Filter: drop-shadow() wird auf die visuelle Form des Elements angewendet (einschließlich Transparenz) und folgt somit nicht-rechteckigen Konturen wie PNGs mit transparentem Hintergrund.

Wie erstelle ich einen Material Design-Kartenelevationseffekt? Stapeln Sie zwei Box-Schatten: einen weichen Umgebungsschatten (großer Blur, niedrige Deckkraft, leicht verteilt) und einen Schlüsselschatten (kleinerer Blur, höhere Deckkraft, Richtungsversatz). Beispiel: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Beeinflusst box-shadow das Seitenlayout? Nein. box-shadow beeinflusst nicht die Größe oder Position des Elements im Dokumentfluss. Im Gegensatz zu outline benötigt es keinen Layout-Platz und verschiebt andere Elemente nicht.

Kann ich box-shadow animieren? Ja. box-shadow kann mit CSS-Übergängen und Animationen animiert werden. Für Leistung sollten Sie box-shadow nur bei Bedarf übergangeben — Browser können box-shadow-Änderungen nicht so effizient GPU-beschleunigen wie transform oder opacity.

Keywords: CSS box shadow Generator, box-shadow CSS, CSS Schatten-Werkzeug, CSS drop shadow, innerer Schatten, mehrschichtiger Schatten, CSS shadow online