グラデーション背景画像生成

グラデーション画像は、最も手軽で見栄えのよい背景です。スマホやパソコンの壁紙、スライドや動画の背景、SNS投稿の仮画像に使えます。このジェネレーターは、フルHD、QHD、4K、スマホ壁紙、正方形の投稿、ストーリーズなどの一般的な画面サイズ、または8192 pxまでの任意のサイズで、CSSのグラデーションと同じ幾何を使って線形・円形・円錐形のグラデーションを描きます。任意のディザは薄いノイズを加えて、なめらかな混色にバンドが出ないようにし、結果はPNG、JPG、WebPでダウンロードできます。

使い方

1. サイズのプリセットを選ぶか、「カスタム」を選んで幅と高さを入力します。
2. 線形・円形・円錐形のいずれかを選び、角度（または円形の形）を設定します。
3. 色の停止位置を、任意の%位置とともに1行に1つずつ入力します。
4. 大きな画面向けにディザを少しオンにしておき、形式を選んでダウンロードします。

計算式

linear: gradient line through the center, length = |W × sin θ| + |H × cos θ| · radial (farthest-corner): ellipse radii = (W ÷ 2 × √2, H ÷ 2 × √2) · conic: canvas start angle = θ − 90°

θはCSSに従い、0°が上向きで、角度は時計回りに増えるため、90°は左から右です。位置のない停止位置は隣の停止位置の間に均等に配置され、前の位置より小さい位置はCSSと同様にそこまで引き上げられます。ディザは、チャンネルごとに255の、選んだ割合の半分までの範囲でノイズを加えます。

計算例

200 × 100の画像で、#FF0000 から #0000FF への90°のグラデーションでは、左端の列が純粋な赤、右端の列が純粋な青、中央のピクセルは約 rgb(127, 0, 128) です。これは linear-gradient(90deg, #ff0000 0%, #0000ff 100%) と同じです。位置を指定せずに白・黒・白の3色を入れると、黒はちょうど50%に置かれます。