しくみ
グラデーションの種類と角度、2〜3色の色とそれぞれの位置を選びます。プレビューはすぐに更新され、そのまま貼り付けられるCSSコードと、スライド・壁紙・SNS投稿に使える1920 × 1080のPNGが手に入ります。
background: linear-gradient(135deg, #2459e0 0%, #f2b33d 100%);
グラデーションの種類
- 線形: 指定した角度の直線に沿って色が混ざります(0° = 下から上、90° = 左から右)。
- 円形: 中心から円状に色が広がります。
- 扇形: 色相環や円グラフのように、中心の周りを色がぐるりと回ります。
活用のヒント
- 色相環で近い色どうしのほうが、反対色どうしよりなめらかに混ざります。
- グラデーションの上の文字は、両端でコントラストを確認して読みやすくしましょう。
- 現在の主要ブラウザはすべて、ベンダープレフィックスなしでこれらのCSSグラデーションに対応しています。
計算の基準と出典
- グラデーションの構文はCSS Images Module Level 3・4(W3C)に準拠
最終確認 2026年10月7日
よくある質問
CSSグラデーションの作り方は?
種類を選び、角度と色を設定したら、生成された「background」の行をスタイルシートに貼り付けてください。
角度は何を意味しますか?
線形グラデーションでは、0°は下から上、90°は左から右、180°は上から下へ進みます。
3色以上使えますか?
はい。「中間色を追加」にチェックを入れると、位置を個別に設定できる3つ目の色が加わります。
グラデーションを画像として保存できますか?
はい。「PNGをダウンロード」で、スライド・壁紙・SNSにそのまま使える1920 × 1080の画像を保存できます。
すべてのブラウザで使えますか?
線形と円形のグラデーションはどこでも使えます。扇形はChrome、Edge、Firefox、Safariの現行バージョンすべてで使えます。