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);
多層シャドウの作成手順
- 1X軸・Y軸オフセット、ぼかし半径、スプレッドを調整します。
- 2レイヤーを追加して、影を重ね合わせることで自然な浮遊感を作ります。
- 3出力された `box-shadow` CSS宣言をコピーします。
Stripe風の美しい陰影を作るコツ
1つの濃い影をつけるのではなく、透明度の高い影を2〜3層重ねることで、現実世界の光の減衰を模したリアルな奥行きが生まれます。
Architecture & Privacy
- 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.