🌈 メッシュグラデーション背景

複数の半透明な円形グラデーションを重ねて、最近流行のオーロラ・メッシュ風の背景を作るツールです。色の点の位置・色・にじみの大きさを調整して滑らかな背景を仕上げ、純粋なCSSでコピーできます。

使い方

1. 色の点の色とX・Y位置のスライダーで配置を調整します。
2. 「色の点を追加」で最大8個まで増やしたり、「ランダム配置」で組み合わせを探します。
3. 背景のベース色とにじみの大きさを決めて全体の雰囲気を整えます。
4. 「CSSをコピー」ボタンでbackgroundプロパティを取り出して貼り付けます。

よくある質問

作業した内容はサーバーに保存されますか？

いいえ。色や位置の調整とCSSの生成はすべてブラウザ内で処理され、どんな情報もサーバーに送信・保存されません。

画像ではなく本物のCSSですか？

はい。出力されるのは複数のradial-gradientを重ねた純粋なCSSのbackgroundプロパティです。画像ファイルではないので容量がなく、どんな画面サイズでも鮮明に表示されます。

動く背景も作れますか？

このツールは静的な背景CSSを作ります。動きをつけたい場合は、コピーしたbackgroundを大きな要素に入れ、CSS animationでbackground-positionや要素を少しずつ動かすと、オーロラが流れるような効果を出せます。