オーロラ / グラデーション・ブロブ CSS 背景ジェネレータ
2～5 個の彩色ラジアルグラデーション・ブロブから、ぼかし、位置、サイズを調整可能な柔らかで見栄えの良い 'aurora' CSS 背景を生成します。オプションの @keyframes ドリフト・アニメーション付き。CSS をコピーするか、ライブプレビューします。
入力
背景
ブロブの後ろに表示される単色。
ブロブの柔らかさ — 値が大きいほどブロブが一緒に混ざります。
ブロブ
ブロブ 1
ブロブ 2
ブロブ 3
アニメーション
出力
オーロラ背景がここに表示されます。
これをスタイルシートに追加し、コンテナに class="aurora-bg" を適用します。
上記のプレビューと一致するインライン・スタイルの div — どこにでも貼り付けられます。ドリフト・アニメーションは含まれていません。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-aurora-blob-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseColor": "#0f0f1e",
"blur": "60",
"blobCount": "2",
"blob1Color": "#ff4d8a",
"blob1X": "20",
"blob1Y": "30",
"blob1Size": "60",
"blob2Color": "#5a3dff",
"blob2X": "75",
"blob2Y": "25",
"blob2Size": "55",
"animate": "",
"animationDuration": "20"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-aurora-blob-generator` tool (Aurora / Gradient Blob CSS Background Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-aurora-blob-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クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
「オーロラ」背景とは？
オーロラ背景 (「グラデーション・ブロブ」または「ブロブ・グラデーション」背景とも呼ばれる) は、無数の SaaS マーケティングページやヒーロー・セクションで人気のある、柔らかく輝く、ぼかされた色合いです — 大きなぼかされた色形がいくつか、コンテンツの後ろをゆっくりドリフトしています。単色のlinear-gradientとは異なり、単一のフラットなフェードではなく、深さと光のように見えます。
このツールは純粋な CSS で効果を作成します: 2 ～ 5 個の色付き radial-gradient() レイヤー (「ブロブ」)、各々が独立して配置およびサイズ設定され、コンマで区切られた background-image レイヤーとしてコンテンツの後ろに積み重ねられ、単一の filter: blur() でソフト化されます。オプションのアニメーションをオンにすると、ブロブは生成された @keyframes ルールを介してゆっくりドリフトします — 実行時には JavaScript、キャンバス、または画像は不要です。
このツールの使い方
- 基本色 (ブロブの後ろに表示される単色) と ぼかし量を選択します。ぼかし値が大きいほど、ブロブがより滑らかなグローに溶け込みます。値が小さいほど、各ブロブがより個別に見えます。
- ブロブの数 (2～5) を選択します。各ブロブは独自の 色、位置 X/Y % (コンテナ内でのセンターの場所) と サイズ % (透明にフェードするまでの広がり方) を取得します。
- オプションで アニメーションを有効にして、遅い
@keyframesドリフト・アニメーションを追加します — 各ブロブは近くの位置にスライドして戻り、制御した時間で、背景が決して静的に見えないようにします。 - CSS をコピーして、
class="aurora-bg"をポジション指定されたコンテナに適用します (またはクラス名を変更して独自のスタイルシートに合わせます) — ブロブはコンテンツの後ろの::before疑似要素でレンダリングされるため、テキストおよび他の子要素は強力なぼかしでも完璧に鮮明なままです。 - プレビューは CSS が何を生成するかをもを示します。下記の HTML スニペットはプレビューと同じマークアップで、スタイルシートが便利でない場所に貼り付けられる自己完結型のインライン
<div>です。スニペットは常に静止 (非アニメーション) フレームを表示します — インラインのstyle属性は@keyframesルールを保持できないため、ドリフトは CSS ブロック (その@keyframes aurora-driftと共に) が実際にスタイルシート内にある場合にのみ表示されます。
ぼかしを選ぶ理由 (より多くのグラデーション・ストップではなく)
全体のレイヤー化された背景に適用される単一の filter: blur() は、オーロラに特徴的な柔らかく輝くエッジを与えるもので、計算が安く、位置またはサイズに関係なくすべてのブロブで同じように機能し、Stripe や Linear のマーケティング・ページのような「フロストされたグロー」ルックの背後にある同じテクニックです。::before 疑似要素にレイヤーを付けることで (コンテナ自体をぼかすのではなく)、ぼかしが実際のコンテンツに出血するのを防ぎます。
FAQ
これはすべてのブラウザで動作しますか？
はい。レイヤー化された radial-gradient() 背景、filter: blur() アニメーション、および CSS @keyframes アニメーションは、ここ数年すべての主要ブラウザでサポートされています — ベンダー・プレフィックスは必要ありません。
アニメーションがオンの場合でも、ライブ・プレビューが静的に見えるのはなぜですか？
プレビューは下記の HTML スニペットと同じインライン・スタイルのマークアップをレンダリングし、インラインの style 属性は @keyframes ルールを参照する方法がありません。アニメーションは実行され、生成された CSS ブロックに含まれています — CSS を実際のスタイルシートに貼り付けると、移動が表示されます。
5 個以上のブロブを使用できますか？
このツールではできません — 5 は生成された CSS を短く保ち、手動編集が容易にしながら、豊かでレイヤー化された外観を提供します。必要に応じて、出力内で radial-gradient() レイヤーを自分でカスタマイズできます。
ブロブごとの不透明度コントロールがないのはなぜですか？ 各ブロブは既に設計上、完全な色から完全に透明にフェードしています (これは「サイズ %」が制御するもの)、およびグローバルな ぼかしはすべてのブロブをさらに同等にソフト化します — 追加の不透明度スライダーは目に見える結果を意味のある方法で変更しないため、コントロールが焦点を当てるために除外されています。
プライバシー
すべてがあなたのブラウザで発生します。選択した色、位置、設定がサーバーに送信されることはありません — CSS、HTML、プレビューはコントロールを調整するにつれてローカルで生成および更新されます。