ボックスシャドウ ジェネレーターでできること

CSS の box-shadow プロパティを視覚的に生成するツールです。offset・blur・spread・色・透明度をスライダーで調整しながらリアルタイムでプレビューできます。複数シャドウの重ねがけにも対応し、生成されたCSSはワンクリックでコピーできます。

使い方

offset-x / offset-y

影の水平・垂直方向のずれを指定します。正の値で右・下方向、負の値で左・上方向に影が移動します。

blur（ぼかし）

影のぼかし半径を指定します。0にするとシャープなエッジの影になります。

spread（広がり）

影の広がりを指定します。正の値で影が拡大、負の値で縮小します。

color / alpha

カラーピッカーまたはHEX入力で影の色を設定します。alphaスライダーで透明度を0〜100%で調整できます。

inset（内側シャドウ）

チェックを入れると影が要素の外側ではなく内側に表示されます。

複数シャドウ

「シャドウを追加」ボタンで複数の影を重ねられます。カンマ区切りのCSS値が自動生成されます。

コピー

コピーボタンで生成されたCSSをクリップボードにコピーできます。

関連ツール

• グラデーション生成 — CSSグラデーションを視覚的に生成
• カラーコード変換 — HEX/RGB/HSL/CMYK相互変換
• Flexboxジェネレーター — CSSレイアウトを視覚的に生成

よくある質問

このツールは無料ですか？

はい、無料です。登録も不要です。

データはサーバーに送信されますか？

いいえ、すべての処理はブラウザ内で完結します。入力データが外部に送信されることはありません。

複数のシャドウを重ねることはできますか？

はい、「シャドウを追加」ボタンで複数のシャドウを重ねられます。カンマ区切りでCSS値が生成されます。

insetシャドウとは何ですか？

insetを有効にすると影が要素の外側ではなく内側に表示されます。凹んだような立体感の表現に使われます。

生成したCSSはどこで使えますか？

コピーボタンでコピーしたbox-shadow値をCSSファイルやインラインスタイルに貼り付けて使用できます。