CSSボックスシャドウジェネレーター
オフセット、ブラー、スプレッド、色、不透明度の値からCSS box-shadow宣言を生成し、オプションのinset付き — コピー可能なrgba()シャドウをスタイルシートに貼り付けます。
入力
シャドウ色と組み合わせてrgba()値になります。
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-box-shadow-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"offsetX": "4",
"offsetY": "4",
"blurRadius": "10",
"spreadRadius": "0",
"color": "#000000",
"opacity": "25",
"inset": ""
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-box-shadow-generator` tool (CSS Box Shadow Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-box-shadow-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSボックスシャドウジェネレーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
機能
CSSボックスシャドウジェネレーターは、スライダーのセットとカラーピッカーを、
貼り付け可能なCSS box-shadow宣言に変換します。水平および垂直のオフセット、
ブラー半径、スプレッド半径、シャドウ色および不透明度を調整し、
必要に応じてシャドウをインセット（内側）シャドウに変換できます — 生成されたCSSは
各コントロールを操作するたびにリアルタイムで更新されます。
box-shadowの構文
CSS box-shadow宣言は次の形式に従います：
box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;- offset-x — シャドウが水平方向にどのくらい移動するか。正の値は 右に移動させ、負の値は左に移動させます。
- offset-y — シャドウが垂直方向にどのくらい移動するか。正の値は 下に移動させ、負の値は上に移動させます。
- blur-radius — シャドウのエッジがどのくらい柔らかいか。
0は 硬いエッジを持つシャドウを生成し、大きな値はブラーをさらに広げます。負の値は使用できません。 - spread-radius — ブラーが適用される前にシャドウを拡大（正）または縮小（負）します。 生のCSSではオプションですが、ここでは完全に明示的な宣言のために常に含まれます。
- color — シャドウの色。
rgba(r, g, b, a)として出力されるため、アルファチャネルが RGB値とともに不透明度スライダーをキャプチャします。 - inset — オフセットの前に配置されるオプションのキーワード。シャドウを 要素の境界の外側ではなく内側にレンダリングするようにします（「押し込み」または「彫刻」の外観）。
複数のシャドウは、コンマで区切ることでスタックできます
(box-shadow: a, b, c;)。このツールは、一度に1つのクリーンなシャドウ宣言の生成に焦点を当てており、
これはほとんどのデザインで必要とされ、複数シャドウエフェクトについては手動でレイアー化または微調整します。
使い方
- 水平オフセットと垂直オフセットのスライダーをドラッグして、 シャドウを配置します。
- ブラー半径を調整してエッジを柔らかくし、スプレッド半径でシャドウの 形を拡大または縮小します。
- シャドウ色を選択して不透明度を設定します — ツールは両者を
単一の
rgba()値に組み合わせます。 - インセットシャドウをオンにすると、ドロップシャドウの代わりに 内側のシャドウが得られます。
- コード出力から生成された
box-shadow宣言をコピーして、 スタイルシートに貼り付けます。
FAQ
出力が16進数の色ではなくrgba()を使用するのはなぜですか？
CSS の16進数の色（#000000）は、単独では部分的な透明度を表現することができないためです。
カラーピッカーと不透明度スライダーを組み合わせて
rgba(r, g, b, a)にすることで、残りの要素に影響する別のopacityプロパティなしに、
シャドウの見た目の強さを正確に調整できます。
spread-radiusは負の値にできますか？ はい — 負のスプレッドはブラーが適用される前にシャドウの形を縮小します。 これは、要素の端をはるかに超えて広がるシャドウではなく、 柔らかく限定されたシャドウ（微妙な浮き上がり効果など）に役立ちます。
通常のシャドウとインセットシャドウの違いは何ですか？
通常のbox-shadowは要素の境界の外側にレンダリングされ、要素がページから
浮き上がっているかのように見えます。インセットシャドウは境界の内側にレンダリングされ、
要素が押し込まれたように見えたり、彫刻されたように見えたりします。
このツールは何かを保存またはアップロードしますか？ いいえ。すべての計算はブラウザでローカルに実行されます — あなたの色とスライダーの値は 決してデバイスを離れません。