使い方

線形、放射状、円錐から種類を選び、角度または中心位置を設定します。
各停止点の色、不透明度、位置を設定します。停止点は最大6つまで追加でき、不要なものは削除できます。
プレビューを確認し、CSSの行をコピーしてスタイルシートに貼り付けます。

仕組み

出力されるのは、標準的なCSSのbackground宣言です。線形グラデーションは角度に沿って変化します。0degは下から上、90degは左から右、180degは上から下です。放射状グラデーションは中心点から円形またはボックスに合わせた楕円形に広がります。円錐グラデーションは、選択した角度から中心点を軸に円を描くように色が変化し、円グラフのような表現やカラーホイールに便利です。

色の停止点は位置の順に記述されるため、位置は自由にドラッグできます。不透明度を下げた停止点はrgba()で記述され、背景が透けて見えます。同じ位置に2つの停止点を置くと、色が滑らかに混ざらず境界ができるため、ストライプを作れます。

3種類のグラデーション関数は、現在のすべてのブラウザーで動作します。既定ではsRGB色空間で色が混ざるため、補色の間（たとえば青と黄色）が少しくすんで見える場合があります。間に明るい色の停止点を追加すると、それを避けられます。

使用例

控えめなヘッダー背景

linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%)は、上から下へなめらかに色が変化し、暗い文字も読みやすく保てます。

境界がくっきりしたストライプ

停止点を4つ設定します: #0b5d1e 0%、#0b5d1e 50%、#f2c14e 50%、#f2c14e 100%。50%の2つの停止点が混ざらずに接するため、上下で色がはっきり分かれます。

スポットライト効果

色の上に、左上を中心とした円形グラデーション（rgba(255, 255, 255, 0.6)からrgba(255, 255, 255, 0)へ）を重ねると、隅に柔らかな光を表現できます。

よくある質問

0degはどの方向ですか？

CSSでは0degは上向きなので、グラデーションは下から始まり、上に向かって変化します。90degは左から右です。0°を左から右とするデザインアプリもあるため、方向の定義が異なる場合があります。

グラデーションをテキストに適用できますか？

はい。背景を適用した後、background-clip: textとcolor: transparentを追加します。グラデーションのどの位置でも、ページ背景に対して文字が読みやすいことを確認してください。

-webkit-linear-gradientなどのベンダープレフィックスは必要ですか？

いいえ。現在のブラウザーは、ベンダープレフィックスなしの構文に対応しています。プレフィックスが必要なのは、何年も前のブラウザーだけです。

プライバシー

すべてブラウザー内で生成されます。色や設定が送信・保存されることはありません。