box-shadow

box-shadow ジェネレーター

X・Y・ぼかし・広がり・不透明度・色をスライダーで調整して box-shadow のCSSを生成。inset で内側の影にも切り替えられます。自然に見せるコツも解説つき。

使い方:スライダーで影を調整すると、box-shadow のCSSが出ます。

仕組み・詳しく
値は X(水平)・Y(垂直)・blur(ぼかし)・spread(広がり)。inset で内側の影に。色と不透明度は rgba() で出力されます。自然に見せるコツは、Yを少し大きめ・blurを広め・不透明度は控えめ(10〜20%)。

設定

色 inset

プレビュー

—
広告