Toollyグラデーション背景メーカー
色と種類（線形・放射状・円錐状）を選ぶだけで、SNS投稿やサムネイル、壁紙用のグラデーション背景を作成できます。CSSコードのコピーとPNG画像でのダウンロードの両方に対応しています。
使い方
- 1プリセットから選ぶか、グラデーションの種類・角度・色を自由に設定します。
- 2色は「色を追加」で増やしたり、位置をスライダーで調整したりできます。
- 3出力サイズを選び、CSSコードをコピーするか、PNG画像としてダウンロードします。
計算方法・変換方法
プレビューはCSSのlinear-gradient／radial-gradient／conic-gradientをそのまま使用しています。
PNG画像はCanvas APIのネイティブなグラデーション機能（createLinearGradient等）で指定サイズに描画してから書き出すため、大きいサイズでも綺麗に出力されます。
利用例
- ブログのアイキャッチやYouTubeのサムネイルの背景を作る
- プレゼン資料の表紙に使う背景画像を用意する
- WebサイトのヒーローセクションのCSSグラデーションを決める
- SNSの投稿画像やストーリーズの背景に敷く単色以上の背景を作る
よくある質問
注意事項
- ・円錐状グラデーション（conic-gradient）は比較的新しいCSS機能のため、古いブラウザでは表示されないことがあります。対応が不安な場合はPNG画像として書き出してご利用ください。
- ・グラデーションの上に文字を載せる場合は、明るい部分と暗い部分の両方で文字が読めるかご確認ください。
- ・生成した画像・CSSは商用・個人問わず自由にご利用いただけます。