オンライン放射状グラデーション画像ジェネレーター

具体的な問題と解決策

例えば、SNSのアイキャッチ画像やプレゼン資料の背景に、中心から端に向かって色が変化するグラデーション画像が必要な場合、このツールを使えば数秒で作成できます。デフォルトの1200×630ピクセル、中心色#3B82F6、端色#EC4899で生成すると、中心(600,315)から外側の半径約677.66ピクセルまでグラデーションが広がり、画像の四隅まで色が届きます。

実際のパラメータと処理

このツールは、指定された中心座標とスケールに基づいて、内側半径0、外側半径を hypot(width, height) / (2 * scale) として同心円を描画します。色の停止位置は0と1に固定されています。中心を移動しても、半径は最も遠い角まで拡大されないため、中心を端に寄せると、反対側の角が端の色で塗りつぶされる場合があります。スケールを200%にすると半径は約338.83ピクセルに半分になります。透明度を有効にすると、各端点の透明度がアルファ値に変換され、外側の円の外側は端の色がそのまま使われます（繰り返しはありません）。

制限事項

• 楕円モードや追加のカラーストップはありません。
• フォーカルポイントのオフセット、テクスチャ、ディザリング、画像のアップロードはできません。
• 大きなサイズを要求した場合、総ピクセル数の上限（2400万）に合わせて縮小されます。
• 生成はブラウザ内で行われ、画像がサーバーにアップロードされることはありません。

よくある質問

中心を0%に設定するとどうなりますか？

中心を0%,0%に設定すると、グラデーションの中心が画像の左上隅に配置されます。50%に戻ることはなく、指定した値がそのまま使われます。

スケールを変更するとどうなりますか？

スケールを大きくすると、外側の半径が小さくなります。例えば、スケール200%では半径が半分になります。スケールを小さくすると半径が大きくなり、グラデーションの変化が緩やかになります。

透明度を有効にすると、画像の外側はどうなりますか？

透明度を有効にすると、中心と端の色にアルファ値が適用されます。外側の円の外側の領域は、端の色がそのまま使われ、透明度は適用されません。PNG形式で保存されるため、アルファ値は保持されます。