CSS グラデーション・シャドー・ジェネレータ — 要素の後ろに配置された柔らかなグラデーション・グロー
擬似要素 ::before と filter: blur() を使用して、要素の後ろに配置された柔らかでカラフルなグラデーション・グローを作成します — プレーンな box-shadow はグラデーションをレンダリングできません。すぐに使える CSS をコピーします。
入力
線形グラデーションの方向、円錐形グラデーションの開始角度。
グロー
グローの辺がどのくらい柔らかく見えるか — これは filter: blur() の半径です。
グローがあらゆる側面から要素の端を超えてどれだけ広がるか。
要素自体の border-radius と一致させて、グローがその形状に従うようにします。
出力
グラデーション・グローがここに表示されます。
これをスタイルシートに追加してから、要素に class="glow" を適用します (position: relative が必要)。
上記のプレビューと一致するインライン・スタイルのマークアップ — どこにでも貼り付けられます。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-gradient-shadow-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"gradientType": "linear",
"angle": "135",
"color1": "#ff5f6d",
"position1": "0",
"color2": "#a855f7",
"position2": "50",
"useColor3": "",
"color3": "#00d4ff",
"position3": "100",
"useColor4": "",
"color4": "#facc15",
"position4": "100",
"blur": "40",
"spread": "20",
"opacity": "80",
"borderRadius": "16"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-gradient-shadow-generator` tool (CSS Gradient Shadow Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-gradient-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クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
box-shadow ではなぜこれができないのですか？
box-shadow は単一の無地のみを受け取ります — linear-gradient()、radial-gradient()、または conic-gradient() をそれに渡す方法はなく、いくつストップを渡してもです。カード、ボタン、または画像の後ろに、色鮮やかでぼやけた「グロー」や「オーラ」を取得するには、別のトリックが必要です: 要素の 後ろ に配置されたは擬似要素 ::before (z-index: -1)、負の inset を介してわずかに大きいサイズで、グラデーション背景で埋められ、filter: blur() で柔らかくされます。これはまさにこのツールが生成するものです。
このツールの使用方法
- グラデーション・タイプ を選択します — Linear（角度 を通る直線的な掃引）、Radial（中心から外に消えていく）、または Conic（中心点の周りを角度 から始まるして掃引します）。
- 2～4 個の カラー・ストップ を設定します。各スポットには独自の色と位置のパーセンテージがあります。3 番目のカラー・ストップを追加 および 4 番目のカラー・ストップを追加 をチェックしてさらに追加します。
- ぼかし（グローの辺がどのくらい柔らかく見えるか）、スプレッド（グローが要素の辺を超えてどれだけ広がるか）、不透明度、および ボーダー・ラディアス（要素自体の
border-radiusと一致させて、グローがその形状に従うようにします）を調整します。 - 生成された CSS をスタイルシートにコピーしてから、グローが必要な要素に
class="glow"を追加します（またはクラス名を自分の命名に合わせてリネームしてください）— 要素自体はposition: relativeだけが必要で、生成された.glowルールによってすでに設定されています。 - プレビュー はライブで効果を表示します。下の HTML スニペット は、スタイルシートが不便な場所に貼り付けられるインラインスタイル・マークアップと同じ結果です。
親になぜ position: relative が必要なのですか？
グローは position: absolute に設定された擬似要素 ::before で機能し、最も近い positioned な祖先に相対的に自分自身を配置します。親に position: relative がないと、グローは代わりにページに固定され（または木の上へさらに次にposition: absoluteされた祖先）、完全に間違った場所に着地します。生成される CSS は、.glow ルールの一部としてこれを設定します。
.glow ルールは position: relative; と一緒に isolation: isolate; も設定します。単独では、position: relative は新しい積み重ね文脈を作成しません — したがって擬似要素 z-index: -1 はその兄弟を通り抜けて、ページの積み重ね順を 持つ 祖先に積み重ねられ、木のさらに上に不透明な背景の後ろにグローを完全に隠すことができます。isolation: isolate は積み重ね文脈を .glow 自体に固定するため、z-index: -1 は単に「自分のコンテンツの後ろ」を意味し、これがグローを要素の端の周りに表示させます。
FAQ
これはすべてのブラウザで機能しますか？
はい— ::before、filter: blur() およびすべての 3 つのグラデーション関数は、ベンダー プレフィックスを必要とせず、長年にわたってすべての主要ブラウザでサポートされています。
グロー の前に実際のコンテンツを配置できますか？
はい、そのためです — z-index: -1 は要素の背景とコンテンツの厳密に後ろに勾配を保つため、テキストと画像は前面に非常にシャープなままで、重いぼかしさえも保たれます。
単一色のぼやけた影だけが必要で、グラデーションではありません — より簡単なツールはありますか？
はい、CSS ボックス・シャドー・ジェネレータ を使用してください — 単純な box-shadow は軽量で、単一の無地のみが必要な場合は擬似要素は必要ありません。
グラデーション自体が欲しいのですが、何かの後ろに光はありません — それはどこにありますか？
CSS グラデーション・ジェネレータ は、要素を直接埋めるためのシンプルな background: linear/radial/conic-gradient(...) 宣言を構築します。これは、このツールのカラー・ストップ コントロールが派生する場所でもあります。
グローの代わりに、フロストガラスのような外観は？ これは別の効果です（グロー（要素の後ろのグロー）ではなく、半透明でぼやけた 背景）— CSS ガラスモルフィズム・ジェネレータ を参照してください。
プライバシー
すべてがブラウザで起こります。選択した色、角度、設定はサーバーに送信されません — CSS、HTML、プレビューは、コントロール を調整する際にローカルで生成および更新されます。