まずは線形か放射状か、形を選ぶ

グラデーションとは、ある色から別の色へのなめらかな移り変わりのことで、CSSでは大きく2つの形が使えます。linear-gradient（線形）は直線方向に進み、要素を横や下へ移動するにつれて色が変化します。radial-gradient（放射状）は中心点から波紋のように外へ広がり、中心から離れるにつれて色が変化します。

線形はボタン・ヒーロー領域・背景など日常的に使える定番です。放射状は、柔らかな光のにじみ、スポットライト効果、焦点から広がる奥行きを出したいときに向いています。

方向と角度のしくみ

線形グラデーションの方向は、色がどちらへ流れるかをブラウザに伝えるだけのものです。「右へ」「下へ」といったわかりやすいキーワードでも、より細かく制御したいときは角度（度）でも指定できます。

角度は時計回りで、0度が真上です。したがって90度は左から右、180度は上から下、45度は右上方向への斜めになります。もし思った向きと逆に見えたら、角度を180度ずらすとたいてい解決します。

グラデーションの中間がくすむ理由

鮮やかな2色を混ぜると、中間がさえない灰色になってしまった——そんな経験はないでしょうか。これは色がRGBチャンネルのまま混ぜられるためで、反対側にある2つの色相の中間点は、彩度の低い色あせた値に着地しがちです。

手軽な対処は、中間にカラーストップを1つ以上加えて、デッドゾーンを突っ切らない見栄えのよい経路を通すことです。ステップ数を増やすと目になめらかに映り、端から端まで色が生き生きと保たれます。

CSSをコピーして上手に使う

プレビューが整ったら、コピーボタンで background 宣言一式をそのまま貼り付けられます。グラデーションは色が使える場所ならどこでも——背景はもちろん、少し設定を足せば文字やボーダーにも——使えます。

実用的なコツとして、グラデーションは装飾なので、上に乗る文字は混色の暗いほうの端と照らし合わせて可読性を確認しましょう。また、グラデーションは画像として読み込むのではなくブラウザが描画するため、どんなサイズでもくっきりと保たれ、ページの重さも増えません。

グラデーションを上質に見せる小技

多くの場合、控えめさが勝ちます。同じ色相の近い2階調の穏やかなグラデーションは洗練されて見えますが、ページ全体に虹をぶつけると古びた印象になりがちです。迷ったら、端の2色を色相環で近づけてください。

フラットなブランドカラーの上に淡いグラデーションを重ねるのは、作り直さずに奥行きを足す手軽な方法です。線形の背景に柔らかな放射状のハイライトを組み合わせると、実際の照明のような見え方も演出できます。ここでストップを生成し、コードをコピーして、しっくりくるまで数値を調整しましょう。