ボックスシャドウ生成

オフセット・ぼかし・広がりをスライダーで調整して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. 1
    スライダーを調整するX・Yオフセット・ぼかし・広がりをスライダーで設定します。
  2. 2
    色と不透明度を設定するシャドウの色と透明度を設定します。
  3. 3
    CSSをコピーするbox-shadowプロパティのCSSをコピーします。

このツールの特徴

  • X・Y・blur・spreadのスライダー調整
  • インセットシャドウ対応
  • 不透明度(opacity)設定
  • リアルタイムプレビュー

このツールについて

オフセット・ぼかし・広がりをスライダーで調整してbox-shadowを生成。