CSSグラデーション生成

仕組み

グラデーションは、CSSでは1つの宣言として書かれ、その構文は、特に角度の規則とカラーストップの位置が、思い出しにくいものです。調整しながら結果を見るほうが、ページを再読み込みして確かめるより速く済みます。

角度の規則は、つまずきやすい点です

CSSでは、0度が上向きで、角度は時計回りに増えるため、90度は左から右、180度は上から下に向かいます。これは数学の規則とも、いくつかのデザインツールの規則とも異なり、他から持ってきたグラデーションが回転した状態になりがちな理由です。

3つの種類

線形は直線に沿って進み、実際の用途のほぼすべてをカバーします。放射状は1点から外側に広がり、光彩やスポットライトに向いています。円錐状は中心の周りを回り、円グラフやカラーホイールは、これを使って作られています。

グラデーションは色ではなく画像です

これも、人がつまずくもう1つの点です。CSSはグラデーションを背景画像として扱うため、backgroundやbackground-imageでは機能しますが、colorやborder-color、そのほか単色を想定するものでは機能しません。文字のグラデーションには、別の手法であるbackground-clipが必要です。

中間の色を追加する

2つのストップなら、きれいにブレンドされます。3つ目を加えると、別の色相を経由して遷移させられ、反対色どうしを直接ブレンドしたときに現れる濁ったグレーを避けられます。