Unterstützt der Generator auch Inset-Innenschatten?

Ja, mit der Inset-Option lassen sich vertiefte Button-Zustände oder Eingabefelder gestalten.

Können Schattenfarben mit Alphatransparenz gewählt werden?

Ja, der RGBA-Farbauswähler erlaubt die stufenlose Regulierung der Schattendichte.

Curated Elevation Presets

Shadow Layers (2)

Layer 1

Layer 2

Shadow TypeOutset (Drop)

Horizontal Offset (X)0px

Vertical Offset (Y)10px

Blur Radius30px

Spread Radius-5px

Shadow Color

Opacity10%

Object Preview Styling

Card Background

Border Radius16px

Real-Time Canvas

Preview Card

2 layers applied

box-shadow:
  0px 10px 30px -5px rgba(0, 0, 0, 0.10),
  0px 4px 12px -2px rgba(0, 0, 0, 0.08);

1Stellen Sie Versatz (X/Y), Weichzeichner (Blur) und Ausbreitung (Spread) ein.
2Fügen Sie mehrere Schichten hinzu, um natürliche optische Tiefenstaffelung zu erzeugen.
3Kopieren Sie die fertige CSS `box-shadow`-Deklaration.

Einfache Schatten wirken oft künstlich hart. Das Übereinanderlegen von 2 bis 3 zarten Schattenebenen imitiert physikalische Lichtstreuung.

High-precision multi-layer stacking: Renders composite drop shadows with GPU compositing optimization.
Full Inset shadow support: Correctly positions inner depth effects alongside outer elevations.
Tailwind arbitrary syntax generator: Outputs ready-to-paste shadow-[...] values with underscore syntax mapping.
Adaptive canvas testing: Switch between light, dark, and dot-grid backdrops to audit shadow legibility.