このツールについて
このツールはキャンバスにグラデーションを描き、その元になるCSSを表示します。種類は10あります。ブラウザ自身が描く線形、円形、円錐形の3つと、ツールが1ピクセルずつ計算する7つで、後者には菱形、渦巻き、サンバースト、ストライプなどがあります。メッシュグラデーションだけは仕組みが違い、カラーストップを1列に並べる代わりに、2×2から4×4までの色の点をグリッドに持ち、そのすべてのあいだを一度に混ぜます。
使い方
- 種類を選び、カラーストップを動かすか、16のプリセットから1つを読み込みます。
- ノイズオーバーレイで粒子感を加えます。画像をドロップすれば、その明るさをグラデーションの色に置き換えられます。
- CSSをコピーするか、1920 × 1080のPNGを保存します。
ガイドを読む（英語）
用語（英語）： メッシュグラデーション · 補間 · ノイズ
よくある質問
WebGLやGPUは必要ですか？
いいえ。ふつうの2Dキャンバスに描きます。線形、円形、円錐形はブラウザが描き、ほかの種類はJavaScriptで1ピクセルずつ計算します。今のブラウザならどれでも動きます。
コピーしたCSSはフレームと同じになりますか？
線形、円形、円錐形、ストライプ、反射形なら同じになります。キャンバスはCSSの決まりに従います。0°が上で角度は時計回りに進み、線形グラデーションは角から角まで伸び、円形の輪は丸くても楕円でもいちばん遠い角まで届きます。ノイズオーバーレイはCSSに入りません。ほかの種類にはCSSがないので、PNGで保存してください。
「繰り返し回数」は何をしますか？
「繰り返し回数」は、ストップの並びを何度か繰り返して置きます。線形では線に沿って、ストライプではそれぞれの縞の中で、反射形では中央の両側で繰り返します。「1つおきに反転」は、2つ目ごとの並びを逆向きにします。どちらもこの3つの種類でだけ表示され、コピーしたCSSにも入ります。
粒子感は毎回同じですか？
同じです。粒子感にも種類「ノイズ」にも、固定のシードから作るノイズを使うので、同じ設定なら読み込むたびに、またPNGでも同じ絵になります。
ブログ（英語）： CSSグラデーション生成ツール2026