Was erzeugt der CSS Box-Shadow-Generator?

Er erzeugt eine vollständige box-shadow-CSS-Deklaration aus einer oder mehreren von Ihnen konfigurierten Ebenen, jede mit eigenem Versatz, Weichzeichnung, Ausbreitung, Farbe und Inset-Einstellung, fertig zum Einfügen in ein Stylesheet.

Kann der CSS Box-Shadow-Generator mehrere gestapelte Schatten erzeugen?

Ja. Klicken Sie auf Ebene hinzufügen, um beliebig viele Schattenebenen zu stapeln — CSS box-shadow unterstützt durch Kommas getrennte Ebenen, und das Tool fügt sie in der richtigen Reihenfolge zusammen.

Was ist ein Inset-box-shadow?

Ein Inset-box-shadow wird innerhalb der Box des Elements statt dahinter gerendert, nützlich für gedrückte Button-Effekte oder dezente innere Ränder. Aktivieren Sie Inset auf jeder Ebene, um umzuschalten.

Unterstützt der CSS Box-Shadow-Generator rgba- und Hex-Farben?

Ja. Geben Sie eine gültige CSS-Farbe — Hex, rgb() oder rgba() — in das Farbfeld einer Ebene ein, oder nutzen Sie den Farbwähler für Hex-Werte; rgba erlaubt es, die Schattenopazität separat zu steuern.

Lädt der CSS Box-Shadow-Generator meine Designwerte hoch?

Nein. Alle Schattenebenen und das generierte CSS bleiben in Ihrem Browser. Keine Daten Ihres Designs werden zu ArrayKit oder irgendeinem Server hochgeladen.

Wie bekomme ich einen weichen, realistischen Schatten statt einer harten Kante?

Verwenden Sie eine größere Weichzeichnung im Verhältnis zum Versatz und erwägen Sie, einen kleinen engen Schatten mit einem größeren weichen zu kombinieren — dieser zweischichtige Ansatz ahmt nach, wie Schatten bei echtem Licht wirken.

CSS Box-Shadow-Generator

Geschichtete CSS-Schatten mit Live-Vorschau erstellen

Der CSS Box-Shadow-Generator läuft vollständig in Ihrem Browser. Die von Ihnen erstellten Schattenebenen und das generierte CSS verlassen niemals Ihr Gerät, und es wird nichts an ArrayKit hochgeladen.

CSS-Grid-Generator öffnen

Über CSS Box-Shadow-Generator

Der CSS Box-Shadow-Generator erstellt eine box-shadow-CSS-Deklaration, indem er es Ihnen erlaubt, beliebig viele Schattenebenen zu stapeln — jede mit eigenem Versatz, Weichzeichnung, Ausbreitung, Farbe und Inset-Umschalter. Eine Live-Vorschau aktualisiert sich sofort, während Sie Werte anpassen, sodass Sie genau sehen, wie der Schatten wirkt, bevor Sie den Code kopieren. Legen Sie einen sanften Umgebungsschatten unter einen engen Kontaktschatten für realistische Tiefe, oder kombinieren Sie eine Inset- und eine Outset-Ebene für einen gedrückten Button-Look. Er ist für Frontend-Entwickler, Designer und alle gedacht, die Karten, Buttons oder Modals gestalten und einen präzisen box-shadow-Wert wollen, ohne Pixel-Offsets manuell in einem Stylesheet zu justieren. Alles läuft lokal in Ihrem Browser — keine CSS- oder Designdaten werden irgendwohin hochgeladen.

Funktionen

Unbegrenzt viele Schattenebenen stapeln, jede mit unabhängigem x, y, Weichzeichnung, Ausbreitung und Farbe
Jede Ebene zwischen Schlagschatten und Inset-Schatten umschalten
Live-Vorschau zeigt den kombinierten Effekt aller Ebenen während der Bearbeitung
Farbwähler plus Textfeld zur direkten Eingabe von Hex-, rgb- oder rgba-Werten
Kopierfertige box-shadow: ...;-CSS-Deklaration wird sofort generiert
Ebenen hinzufügen oder entfernen, um einfache weiche Schatten oder komplexe geschichtete Tiefe zu erzeugen
Negative Ausbreitungs- und Versatzwerte werden für eingerückte Schatten unterstützt
Läuft vollständig in Ihrem Browser, ohne Schatten- oder Designdaten irgendwohin zu senden

So verwendest du CSS Box-Shadow-Generator

Passen Sie x, y, Weichzeichnung und Ausbreitung der ersten Schattenebene an
Wählen Sie eine Farbe und aktivieren Sie Inset, wenn der Schatten innen liegen soll
Klicken Sie auf Ebene hinzufügen, um einen weiteren Schatten für mehr Tiefe zu stapeln
Kopieren Sie das generierte box-shadow-CSS aus dem Code-Panel

Beispiel

Eingabe

x0 y4 blur8 rgba(0,0,0,.2)

Ausgabe

box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);

Ein weicher Schlagschatten als fertige, einfügbare CSS-Deklaration.

Häufige Fehler & Fehlerbehebung

Der box-shadow wirkt zu hart oder kastenförmig statt weich. — Erhöhen Sie die Weichzeichnung im Verhältnis zum Versatz — eine größere Weichzeichnung mit moderatem y-Versatz erzeugt einen weicheren, natürlicheren Schatten.
Eine Inset-Ebene ist in der Vorschau-Box nicht sichtbar. — Inset-Schatten erscheinen nur innerhalb des Padding-Bereichs des Elements — stellen Sie sicher, dass Versatz und Weichzeichnung der Ebene groß genug sind, um vor dem Hintergrund der Vorschau sichtbar zu sein.
Mehrere Ebenen machen den Schattenwert im Stylesheet schwer lesbar. — Das ist normal — box-shadow akzeptiert durch Kommas getrennte Ebenen, und der CSS Box-Shadow-Generator hält jede Ebene bewusst in derselben Zeile; formatieren Sie mit einem Linter, wenn Sie eine Ebene pro Zeile möchten.
Ein negativer Ausbreitungswert scheint den Schatten fast verschwinden zu lassen. — Eine negative Ausbreitung zieht die Kanten des Schattens vor der Weichzeichnung nach innen — kombinieren Sie sie mit größerer Weichzeichnung, damit der Schatten sichtbar bleibt; das ist bei engen Kontaktschatten üblich.

Häufig gestellte Fragen

Was erzeugt der CSS Box-Shadow-Generator?: Er erzeugt eine vollständige box-shadow-CSS-Deklaration aus einer oder mehreren von Ihnen konfigurierten Ebenen, jede mit eigenem Versatz, Weichzeichnung, Ausbreitung, Farbe und Inset-Einstellung, fertig zum Einfügen in ein Stylesheet.
Kann der CSS Box-Shadow-Generator mehrere gestapelte Schatten erzeugen?: Ja. Klicken Sie auf Ebene hinzufügen, um beliebig viele Schattenebenen zu stapeln — CSS box-shadow unterstützt durch Kommas getrennte Ebenen, und das Tool fügt sie in der richtigen Reihenfolge zusammen.
Was ist ein Inset-box-shadow?: Ein Inset-box-shadow wird innerhalb der Box des Elements statt dahinter gerendert, nützlich für gedrückte Button-Effekte oder dezente innere Ränder. Aktivieren Sie Inset auf jeder Ebene, um umzuschalten.
Unterstützt der CSS Box-Shadow-Generator rgba- und Hex-Farben?: Ja. Geben Sie eine gültige CSS-Farbe — Hex, rgb() oder rgba() — in das Farbfeld einer Ebene ein, oder nutzen Sie den Farbwähler für Hex-Werte; rgba erlaubt es, die Schattenopazität separat zu steuern.
Lädt der CSS Box-Shadow-Generator meine Designwerte hoch?: Nein. Alle Schattenebenen und das generierte CSS bleiben in Ihrem Browser. Keine Daten Ihres Designs werden zu ArrayKit oder irgendeinem Server hochgeladen.
Wie bekomme ich einen weichen, realistischen Schatten statt einer harten Kante?: Verwenden Sie eine größere Weichzeichnung im Verhältnis zum Versatz und erwägen Sie, einen kleinen engen Schatten mit einem größeren weichen zu kombinieren — dieser zweischichtige Ansatz ahmt nach, wie Schatten bei echtem Licht wirken.