So nutzen Sie es

Vier Schritte: einfügen, ausführen, prüfen, kopieren. Alles bleibt im Browser.

Eingabe einfügen

CSS, HTML, JSON oder anderen Text einfügen. Nichts wird hochgeladen.

Tool ausführen

Auf Konvertieren oder Ausführen klicken. Das Ergebnis erscheint sofort.

Ausgabe prüfen

Generierten Code und Hinweise prüfen, bevor Sie ihn übernehmen.

Kopieren und nutzen

Ausgabe kopieren und in Ihr Projekt einfügen.

Über dieses Tool

Hier lassen sich X- und Y-Versatz, Weichzeichnung, Ausdehnung und Farbe eines Schattens einstellen, optional mit inset, und anschließend als box-shadow-Deklaration oder arbiträre shadow-[…]-Klasse exportieren.

Beispiel

Die Startwerte entsprechen einer schwebenden Karte auf dunklem Hintergrund.

Eingabe

0 8px 24px 0 rgba(0,0,0,0.2)

Ausgabe

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

Tipp

Weiche UI-Schatten liegen selten auf der Standardskala, arbiträre Werte bewahren die genaue Wirkung.