CSSのbox-shadowをビジュアルに作成。プレビュー付きでコードをコピー。
CSSのbox-shadowプロパティを視覚的に調整して生成する無料ツールです。X/Y方向のオフセット、ぼかし、広がり、色をスライダーで直感的に操作し、リアルタイムでプレビューしながらCSSコードを生成できます。
外側シャドウ（ドロップシャドウ）と内側シャドウ（インセットシャドウ）の両方に対応しています。複数のシャドウを重ねることで、より立体的な表現が可能です。
フラットデザインでは影をほとんど使いませんが、ニューモーフィズム（Neumorphism）デザインでは内側と外側の影を組み合わせて柔らかな立体感を表現します。このツールで各種デザインスタイルの影を試すことができます。
CSSのbox-shadowプロパティは、要素の周囲に影（シャドウ）を描画するためのプロパティです。基本の構文は「box-shadow: 水平方向のオフセット 垂直方向のオフセット ぼかし半径 広がり半径 色;」という順番で、値を半角スペースで区切って指定します。たとえば box-shadow: 5px 5px 20px 0px rgba(99,102,241,0.4); と書くと、右へ5px・下へ5pxずれた位置に、ぼかし20px・広がり0pxの半透明な紫色の影が落ちます。
先頭の2つの値（オフセット）は省略できず必須です。3つ目のぼかし半径と4つ目の広がり半径は省略可能で、省略した場合は0として扱われます。色を省略すると、多くのブラウザでは文字色（currentColor）が使われます。値の先頭に inset キーワードを付けると、影が要素の外側ではなく内側に描画される「内側の影」になります。このツールは外側の影を生成しますが、出力コードにinsetを付け足せば内側の影にも応用できます。
本ツールは、Xオフセット・Yオフセット・ぼかし・広がりの4つの値をスライダーで、色をカラーピッカーで、透明度をスライダーで操作します。指定した色と透明度は内部でrgba形式に変換され、box-shadowの一行コードとしてリアルタイムにプレビュー・出力されます。すべての処理はブラウザ内で完結し、入力した値がサーバーへ送信されることはありません。
| パラメータ | CSSでの位置 | 意味 | 本ツールの操作 |
|---|---|---|---|
| offset-x | 1番目（必須） | 水平方向のオフセット。プラスで右、マイナスで左に影がずれる | Xオフセット（-50〜50px） |
| offset-y | 2番目（必須） | 垂直方向のオフセット。プラスで下、マイナスで上に影がずれる | Yオフセット（-50〜50px） |
| blur-radius | 3番目（省略可） | ぼかし半径。大きいほど影の輪郭がぼやける。0で輪郭がくっきり | ぼかし（0〜100px） |
| spread-radius | 4番目（省略可） | 広がり半径。プラスで影が拡大、マイナスで縮小する | 広がり（-50〜50px） |
| color | 任意の位置 | 影の色。rgba指定で透明度も持たせられる | 色＋透明度（rgbaに変換） |
| inset | 先頭に記述 | 付けると外側でなく内側の影になる | 出力コードに手動で追記 |