⭐ 0
🔍
Text Bild PDF & Dokumente Audio Musik Elektronik Zeit Dienstprogramme Validatoren Esoterik Spiele

Card Shadow CSS – Dezenter Box-Shadow-Code

Erstellen Sie visuell CSS-Box-Shadow-Code: Schieberegler für Versatz, Unschärfe, Ausbreitung, Farbe mit Deckkraft, Einfügungsmodus und bis zu vier Ebenen mit Live-Vorschau.

0px
4px
12px
0px
0.25
Verarbeitung... 0%

Ergebnis

Auf dieser Seite wird der Box-Shadow-Generator geöffnet, der auf einen klassischen Kartenschatten voreingestellt ist: 2 Pixel nach unten, 8 Pixel Unschärfe, 15 % Schwarzdeckkraft. Es ist bewusst leise – genug, um eine Karte von der Seite zu trennen, ohne sich anzukündigen – und die Vorschau zeigt genau, wie leise es ist.

Dieser Bereich entspricht den niedrigsten Höhenstufen in den meisten Designsystemen: Listenkarten, Dropdown-Menüs, Popovers und Tabellenzeilen beim Hover. Wenn Sie eine stärkere Anhebung für modale oder schwebende Panels benötigen, erhöhen Sie den Y-Versatz und verwischen Sie sie miteinander – sie sollten proportional wachsen, um die Lichtquelle glaubhaft zu machen.

Kopieren Sie die Box-Schatten-Linie in Ihre Komponentenstile oder duplizieren Sie sie als zweite Ebene mit einer stärkeren Unschärfe, um die Kantendefinition hinzuzufügen. Das Tool ist kostenlos und läuft vollständig in Ihrem Browser.

🛡️
Im Browser ausgeführt

Ihre Dateien und Eingaben verlassen dieses Gerät nie. Die Verarbeitung läuft vollständig offline. 100 % sicher.

Akzeptierte Formate & Regeln

  • Schieberegler für X/Y-Versatz, Unschärfe und Streuung mit Live-Pixelanzeigen sowie ein Farbwähler mit separatem Deckkraft-Schieberegler.
  • Kontrollkästchen „Einfügen“ und eine Ebenenliste: Fügen Sie bis zu vier Schattenebenen hinzu, wählen Sie sie aus und entfernen Sie sie.
  • Kopierbare Box-Shadow-CSS-Linie, die alle Ebenen abdeckt, Vorschau auf einem umschaltbaren hellen oder dunklen Hintergrund.

Wichtigste Vorteile

✓ Jeder Schieberegler aktualisiert die Vorschaukarte und die CSS-Zeile sofort – keine Ahnung, wie 0 8px 24px rgba(...) tatsächlich aussehen wird.
✓ Mit bis zu vier Schattenebenen können Sie realistische Erhebungen und neumorphische Effekte erstellen, die Einzelschattengeneratoren nicht darstellen können.
✓ Der Umschalter zwischen hellem und dunklem Hintergrund zeigt, wie Ihr Schatten zu beiden Themen aussieht, bevor Sie ihn versenden.

Anwendungsfälle

  • • Wählen Sie einen weichen Höhenschatten für eine Produktkarte, indem Sie Schieberegler ziehen, anstatt die rgba()-Werte blind zu bearbeiten.
  • • Erstellen Sie den zweischichtigen Hell-/Dunkel-Neumorphismus-Effekt und kopieren Sie die gesamte mehrschichtige Box-Schatten-Linie mit einem Klick.
  • • Überprüfen Sie vor dem Versenden des Themes anhand des dunklen Vorschauhintergrunds, ob Ihr Schatten noch im dunklen Modus angezeigt wird.