CSS Box Shadow Generator
Kostenloser Online-CSS-Box-Shadow-Generator. Erstellen Sie visuell schöne Schatten mit einstellbarem Versatz, Unschärfe, Ausbreitung, Farbe und Inset. Live-Vorschau und sofortiges Code-Kopieren.
Was ist CSS box-shadow?
CSS box-shadow ist eine CSS-Eigenschaft, die Schatteneffekte um den Rahmen eines Elements hinzufügt. Sie ermöglicht das Erstellen von Drop-Shadows, inneren Schatten und mehreren Schattenebenen durch Angabe von Versatz, Unschärferadius, Ausbreitungsradius und Farbwerten.
Was sind die Parameter von box-shadow?
Die box-shadow-Eigenschaft akzeptiert mehrere Werte: horizontaler Versatz (X), vertikaler Versatz (Y), Unschärferadius, Ausbreitungsradius, Farbe und das optionale inset-Schlüsselwort. Sie können auch mehrere Schatten durch Kommas getrennt angeben.
Was ist das inset-Schlüsselwort?
Das inset-Schlüsselwort ändert den Schatten von einem äußeren Schatten (Drop-Schatten) zu einem inneren Schatten. Wenn inset angegeben wird, wird der Schatten innerhalb des Elementrandes statt außerhalb gezeichnet, was einen Inset-Effekt erzeugt.
Was ist der Unschärferadius?
Der Unschärferadius bestimmt, wie stark die Schattenkante unscharf ist. Ein Wert von 0 erzeugt eine scharfe, feste Kante. Größere Werte erzeugen einen diffuseren, weicheren Schatten, der sich weiter vom Element entfernt erstreckt.
Was ist der Ausbreitungsradius?
Der Ausbreitungsradius vergrößert oder verkleinert die Schattengröße. Positive Werte machen den Schatten größer als das Element, negative Werte machen ihn kleiner. Dies beeinflusst den Schatten, bevor die Unschärfe angewendet wird.
Wie erstelle ich mehrere Schatten?
Sie können mehrere Schatten erstellen, indem Sie jede Schattendefinition durch ein Komma trennen. Jeder Schatten kann unterschiedliche Versatz-, Unschärfe-, Ausbreitungs- und Farbwerte haben. Schatten werden in der Reihenfolge angewendet, in der sie deklariert werden, wobei der erste Schatten oben liegt.
Kann ich RGBA-Farben für Schatten verwenden?
Ja, Sie können jedes CSS-Farbformat verwenden, einschließlich RGBA, HSLA, HEX oder benannte Farben. RGBA und HSLA sind besonders nützlich für halbtransparente Schatten, die natürlich mit Hintergründen verschmelzen.
Wie kopiere ich den generierten CSS-Code?
Klicken Sie einfach auf die Schaltfläche "Code kopieren" in der Generator-Oberfläche. Der CSS-Code wird in Ihre Zwischenablage kopiert und kann direkt in Ihr Stylesheet oder Ihre HTML-Datei eingefügt werden.
Wird box-shadow in allen Browsern unterstützt?
Ja, box-shadow wird in allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari, Edge und Opera. Es ist seit 2011 Teil von CSS3 und bietet hervorragende Browserkompatibilität.
Beeinflusst box-shadow die Leistung?
box-shadow hat minimale Auswirkungen auf die Leistung moderner Browser. Die Verwendung mehrerer komplexer Schatten mit großem Unschärferadius auf vielen Elementen kann jedoch die Rendering-Leistung beeinträchtigen, insbesondere auf mobilen Geräten.
Was sind häufige Anwendungsfälle für box-shadow?
Häufige Anwendungen umfassen das Erstellen von Karten-Effekten, das Hinzufügen von Tiefe zu Schaltflächen, das Erstellen von Inset-Formularfeldern, das Implementieren von Material-Design-Schatten und das Hinzufügen visueller Trennung zwischen überlappenden Elementen.
Kann ich box-shadow animieren?
Ja, box-shadow kann mit CSS-Übergängen oder Animationen animiert werden. Das Animieren von box-shadow kann jedoch leistungsintensiv sein. Für bessere Leistung erwägen Sie die Verwendung von Pseudo-Elementen mit Deckkraft-Übergängen.