ボックスシャドウ生成
オフセット・ぼかし・広がりをスライダーで調整してbox-shadowを生成。
Box Shadow Generator
4px
4px
10px
0px
#000000
30%
box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.30);関連ツール
ボックスシャドウ生成の主な使い方・用途
- ✓カードUIのシャドウデザイン
- ✓ボタンの立体感表現
- ✓フォーム要素のフォーカス効果
- ✓モーダルの奥行き表現
- ✓Figmaデザインをコードに変換
使い方(ステップ別)
- 1スライダーを調整する— X・Yオフセット・ぼかし・広がりをスライダーで設定します。
- 2色と不透明度を設定する— シャドウの色と透明度を設定します。
- 3CSSをコピーする— box-shadowプロパティのCSSをコピーします。
このツールの特徴
- ●X・Y・blur・spreadのスライダー調整
- ●インセットシャドウ対応
- ●不透明度(opacity)設定
- ●リアルタイムプレビュー
このツールについて
オフセット・ぼかし・広がりをスライダーで調整してbox-shadowを生成。