グラデーション生成
色・位置・角度を動かすと、プレビューとCSSコードがすぐに変わります。同じ設定をPNG画像として保存することもできます。
プリセット:
種類
°
色の指定(2/8)
- 0%
- 100%
CSSコード
background: #6366f1; background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
お問い合わせ、不具合の報告、機能改善のご提案はお問い合わせフォーム（Googleフォーム・新しいタブで開きます）から送信できます。
使い方
- グラデーションの種類（線形・円形・円錐）を選びます。
- 色を選び、位置や角度のスライダーで調整します。プリセットやランダムも使えます。
- プレビューを確認し、「コードをコピー」でCSSを取得します。
- 画像として使う場合はサイズを選び「PNG画像として保存」を押します。
よくある質問
最大で何色まで使えますか？
最大8色まで追加できます。
CSSと保存したPNGで見た目は同じですか？
同じ設定から作っているため、ほぼ同じ見た目になります。ブラウザの色の補間の違いにより、ごくわずかな差が出ることがあります。
作った画像は商用利用できますか？
このツールで作成したグラデーション画像に、当サイトとしての利用制限はありません。