CSS-Box-Schatten erstellen

Die Seite startet mit zwei Schattenebenen. Stellen Sie Versatz, Unschärfe, Ausbreitung, Farbe, Deckkraft und inneren Schatten je Ebene ein, fügen Sie bis zu vier hinzu und kopieren Sie eine box-shadow-Deklaration.

Läuft lokal in deinem Browser

Kategorie ansehen: Frontend & Design (34)

· box-shadow · rgba() · inset

STEUERPULT

LIVE-VORSCHAU

VoriTools

CSS EXPORTIEREN

So stapeln, justieren und kopieren Sie einen box-shadow

Die Seite startet mit zwei Schatten auf einer weißen Vorschaukarte: 0px 18px 42px -14px rgba(31, 71, 53, 0.28) und 0px 4px 10px 0px rgba(31, 71, 53, 0.12). Vorschau und Ausgabefeld sind dieselbe Zeichenkette – was Sie sehen, legt „CSS kopieren“ in die Zwischenablage.

Jede Ebene behält eigenen Versatz, Unschärfe, Ausbreitung, Farbe, Deckkraft und die Option für innere Schatten. Eine neue Ebene wird von der aktiven abgeleitet statt leer zu starten: „Ebene hinzufügen“ addiert 4px auf Y, 10px auf die Unschärfe (maximal 200) und zieht 0,06 von der Deckkraft ab (Minimum 0,05), während Ausbreitung und Farbe übernommen werden und innen aus bleibt.

Wählen Sie die Ebene unter „Aktive Ebene“ oder drücken Sie „Ebene hinzufügen“ für eine dritte und vierte. Die Liste zeigt Ebene 1 bis Ebene 4; die vierte ist das Maximum und die letzte verbleibende Ebene lässt sich nicht entfernen.

Tragen Sie den horizontalen und vertikalen Versatz ein. Beide nehmen -100 bis 100px an, die Unschärfe 0 bis 200px und die Ausbreitung -100 bis 100px. Nachkommastellen bleiben mit einer Stelle erhalten; ein Wert außerhalb des Bereichs wird beim Verlassen des Feldes auf die Grenze zurückgeschrieben.

Wählen Sie die Farbe im Farbfeld und stellen Sie die Deckkraft zwischen 0 und 1 ein. Die Deckkraft behält zwei Nachkommastellen und wird in rgba() ausgegeben: Die Hex-Farbe wird zu Kanälen von 0 bis 255 mit dem eingegebenen Alpha.

Setzen Sie „Innerer Schatten“, um diese Ebene in die Karte zu legen. Die Option gilt nur für die aktive Ebene, und eine neue Ebene startet immer ohne Häkchen.

Drücken Sie „CSS kopieren“ für die ganze Deklaration oder „Zurücksetzen“, um zu den zwei Ausgangsebenen zurückzukehren. Die Zwischenablage erhält das Ausgabefeld Zeichen für Zeichen, inklusive des festen Selektors .shadowed-element.

Ausgangswerte, die Grenze von vier Ebenen und die beim Bestätigen gespeicherten Werte

Vier Ebenen, eine Deklaration

Die Ebenen werden in der Reihenfolge der Liste ausgegeben, eine pro Zeile, als ein einziger box-shadow-Wert. Die erste Zeile ist der oben liegende Schatten: In einer Pixelprüfung mit Rot und 24px Ausbreitung als Ebene 1 und Blau mit 12px als Ebene 2 war der Überlappungsbereich von 0-12px rot – spätere Ebenen erscheinen also nur dort, wo die frühere kleiner oder durchsichtiger ist.

„Ebene hinzufügen“ leitet den neuen Eintrag von der aktiven ab (Y + 4px, Unschärfe + 10px bis 200, Deckkraft - 0,06 bis 0,05, gleiche Ausbreitung und Farbe, innen aus). „Ebene entfernen“ löscht die aktive Zeile und behält mindestens eine; der Zähler zeigt 1 Ebene bis 4 Ebenen.

Grenzen, die beim Bestätigen zurückgeschrieben werden

Horizontaler und vertikaler Versatz -100 bis 100, Unschärfe 0 bis 200, Ausbreitung -100 bis 100 und Deckkraft 0 bis 1. Während der Eingabe bleibt die Vorschau innerhalb dieser Grenzen; beim Verlassen des Feldes wird der gerundete Wert in das Feld geschrieben, sodass Feld, Vorschau und Code immer übereinstimmen.

Ein geleertes Feld stellt den zuvor gespeicherten Wert wieder her, statt auf null zu springen. Bruchteile in Pixeln behalten eine Stelle (12.5px bleibt 12.5px), die Deckkraft zwei; x = 999 speichert 100px und Unschärfe = -10 speichert 0px.

Was diese Seite nicht leistet

Jede Ebene nimmt eine Hex-Farbe; das Alpha kommt aus dem Deckkraftfeld, daher gibt es kein hsl(), keine Farbnamen, keinen Verlauf und keine zweite Farbe. Der exportierte Selektor ist fest, und das Ergebnis ist eine einzige box-shadow-Deklaration ohne CSS-Variable oder Ausgabe pro Haltepunkt.

Es gibt keinen drop-shadow- oder text-shadow-Modus, keinen Bild- oder SVG-Export und keine Historie außer „Zurücksetzen“. Alles rechnet im Browser: Im Test erzeugten alle Bedienelemente, das Hinzufügen und Entfernen einer Ebene, das Kopieren und das Zurücksetzen keine einzige Netzwerkanfrage, und die Seite arbeitet offline weiter.