CSS-Box-Shadow-Generator
Gestaltet Box-Shadows.
Ü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.
So nutzen Sie es
Regler verschieben, die Vorschaukarte beobachten und den Schatten anschließend in dem Format kopieren, das das Projekt verwendet. Zum Schluss das Ergebnis auf hellem und auf dunklem Hintergrund gegenprüfen.
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.
Gut zu wissen
Kann ich mehrere Schatten stapeln?
Der Generator erzeugt jeweils eine Schattenebene. Kombinieren Sie Ebenen, indem Sie die Werte in Ihrem CSS mit Kommas verbinden.
Wie entsteht die Tailwind-Klasse?
Leerzeichen werden in shadow-[…] zu Unterstrichen — so liest Tailwind Arbitrary Values. Leerzeichen in rgba()-Farben werden entfernt, wie es das Tool schon tut.