グラデーション背景メーカー
色と種類（線形・放射状・円錐状）を選ぶだけで、SNS投稿やサムネイル、壁紙用のグラデーション背景を作成できます。CSSコードのコピーとPNG画像でのダウンロードの両方に対応しています。
使い方
- 1プリセットから選ぶか、グラデーションの種類・角度・色を自由に設定します。
- 2色は「色を追加」で増やしたり、位置をスライダーで調整したりできます。
- 3出力サイズを選び、CSSコードをコピーするか、PNG画像としてダウンロードします。
計算方法・変換方法
プレビューはCSSのlinear-gradient／radial-gradient／conic-gradientをそのまま使用しています。
PNG画像はCanvas APIのネイティブなグラデーション機能（createLinearGradient等）で指定サイズに描画してから書き出すため、大きいサイズでも綺麗に出力されます。
グラデーションは3種類から選べます。線形（linear）は指定した角度の方向へ直線的に色が変わり、円形（radial）は中心から外側へ広がるように変わり、扇形（conic）は中心のまわりを回転するように変わります。背景には線形、スポットライトのような効果には円形、円グラフや光沢の表現には扇形がよく使われます。
線形グラデーションの角度は、0度で下から上、90度で左から右、180度で上から下へ色が変わります。色ごとの位置（%）は、その色がグラデーションのどの地点に来るかを表します。2つの色の位置を近づけると色の変わり目がはっきりし、離すとなだらかに変化します。
CSSで出力したグラデーションは画像ファイルを読み込まないため表示が速く、どんな画面サイズでも粗くなりません。Webサイトの背景にはCSSを、SNSのサムネイルや資料の背景のように画像が必要な場面にはPNGを使うのがおすすめです。
利用例
- ブログのアイキャッチやYouTubeのサムネイルの背景を作る
- プレゼン資料の表紙に使う背景画像を用意する
- WebサイトのヒーローセクションのCSSグラデーションを決める
- SNSの投稿画像やストーリーズの背景に敷く単色以上の背景を作る
よくある質問
商用利用できますか？
はい。生成したグラデーション画像・CSSコードは自由にご利用いただけます。
放射状・円錐状グラデーションもCSSでそのまま使えますか？
はい。表示されるCSSコードをそのまま`background`プロパティに指定するだけで、プレビューと同じ見た目になります。
CSSと画像、どちらを使うべきですか？
Webサイトの背景ならCSSがおすすめです。ファイルを読み込まないため表示が速く、画面サイズに応じて自動的に伸縮します。動画のサムネイルやSNS投稿など、画像ファイルが必要な用途ではPNGで書き出してください。
きれいに見えるグラデーションのコツはありますか？
色相が近い色同士を組み合わせると自然にまとまります。離れた色相をつなぐと中間に濁った色が現れやすいため、その場合は中間色を1つ追加すると滑らかになります。
作った背景は商用利用できますか？
はい。生成したCSSコードと画像は、個人・商用を問わず自由にご利用いただけます。
注意事項
- ・円錐状グラデーション（conic-gradient）は比較的新しいCSS機能のため、古いブラウザでは表示されないことがあります。対応が不安な場合はPNG画像として書き出してご利用ください。
- ・グラデーションの上に文字を載せる場合は、明るい部分と暗い部分の両方で文字が読めるかご確認ください。
- ・生成した画像・CSSは商用・個人問わず自由にご利用いただけます。