CSS box-shadow ジェネレータ WEB制作
box-shadow をスライダーで視覚的に作成できるジェネレータです。複数のシャドウを重ねた多層シャドウや、内側影 (inset)、テキストシャドウにも対応。Material風・Neumorphism風のプリセットも完備しており、ボタン・カード・テキストのシャドウを瞬時に実装できます。
SHADOW
CSS
Tailwind CSS (任意値)
使い方
- シャドウ種類 (box-shadow / text-shadow) をタブで選択
- X/Y/Blur/Spread/カラー/透明度 をスライダーで調整
- 内側影 (inset) のチェックでボタン押下風の凹みを作成
- 「+ 追加」で複数レイヤーを重ねて多層シャドウ作成可能 (Material風・Neumorphism風)
- プリセットから一発で人気の表現を呼び出し可能
シャドウ設計のポイント
- 自然な影: Y +2〜8 / Blur 10〜20 / カラーは黒・透明度 15-25%
- Material風: 多層シャドウで層の高さを表現 (2層+)
- Neumorphism: 明暗2層の影で凸凹を表現
- ボタン凹み: inset 影で押下感を表現