CSSグラデーション背景の作り方：線形とメッシュ
CSS のグラデーション背景は、background-image にグラデーションを指定して作ります。一方向に色が移り変わる「線形」は linear-gradient、複数の色がにじみ合う「メッシュ」は色の点ごとの radial-gradient を重ねて表現します。
このツールでは、色の点をドラッグしながら線形とメッシュの背景を作れます。ぼかし・ノイズ・色相などの効果、12種類のブレンドモード、四隅の丸みを変えた不定形（Blob）の形、アニメーションも付けられます。できた CSS は Copy ボタンでコピーでき、背景を PNG・WebP・SVG の画像で書き出すこともできます。処理はブラウザの中だけで行い、設定がサーバーに送られることはありません。
生成したコードの使い方
- 見た目を決める。マスタープリセット（10種）から近いものを選び、「メッシュ (放射状)」か「線形 (Linear)」を選んで、色・効果・形を調整します。
- CSS をコピーする。CSS の Copy ボタンを押し、自分のページの CSS に貼り付けます。スタイルは
.mesh-gradientというクラスで、幅と高さも含めて出力されます。 - 要素にクラスを付ける。背景にしたい要素に
class="mesh-gradient"を付けます。画面いっぱいに広げたいときは、widthとheightの値を100%などに書き換えてください。
ブラウザ対応
| ブラウザ | radial-gradient（メッシュ） |
@property（アニメーション） |
|---|---|---|
| Chrome・Edge | Chrome 26 以降・Edge 12 以降 | 85 以降 |
| Safari（Mac・iPhone） | 7 以降 | 16.4 以降 |
| Firefox | 16 以降 | 128 以降 |
出典: MDN の互換性データ（browser-compat-data 8.1.2、2026年9月時点）。linear-gradient も同じバージョンから使えます。アニメーションは @property で色の点の位置を動かしているため、@property に対応していないブラウザではなめらかに動きません。
よくある質問 (FAQ)
複数の色が面の上で自由ににじみ合うグラデーションです。CSS には専用の指定が無いため、色の点ごとに「中心から外へ透明になる
radial-gradient」を作り、それを何枚も重ねて表現します。
点の位置と広がりを変えるだけで、オーロラのような背景になります。
出力された
width と height を書き換えます。ツールはプレビューの大きさを px で出力するので、ページ全体の背景にするなら width: 100%; や min-height: 100vh; に変えてください。
色の点の位置は % で指定されているため、大きさを変えても配置の比率は保たれます。
「はみ出し補正」の「自動拡張」をオンにして書き出してください。ぼかしや回転を強くかけると、形がキャンバスの外へはみ出します。自動拡張をオンにすると、はみ出した分を計算して余白を広げてから書き出します。