CSSのプロパティ名は「gradient（勾配）」だが、日本語のデザイン用語で使われるカタカナ語は「グラデーション」——これは英語の「gradation」から借用された言葉であり、CSSの綴りとは別の単語に由来している。
「グラデーション」と「gradient」、語源のずれ
日本語の「グラデーション」は色や濃淡が段階的に変化することを指す一般的なデザイン用語として、CSSが普及するはるか前から印刷・グラフィックデザインの現場で使われてきた。一方、CSSのlinear-gradient()という関数名は英語の「gradient（変化の度合い・勾配）」に由来し、「gradation」とは語尾も語源も異なる別の単語だ。日本語話者がCSSのプロパティ名を見て「グラデーションのことだ」と直感的に理解できるのは、たまたま両方の英単語が日本語では同じカタカナ語に収斂しているためで、綴りを直接対応させているわけではない。
3種類の色の広がり方
linear-gradient(45deg, red, blue)は指定した角度の直線に沿って色を引き伸ばす、ボタンやバナーの背景で最もよく使われるタイプだ。radial-gradient(circle, yellow, orange)は点から外側へ同心円状に色を広げ、スポットライトのような効果に向く。conic-gradient(red, yellow, green, blue, red)は時計の針のように中心点の周りに色を回転させ、追加のグラフィックなしで円グラフや進捗リングを描ける唯一のタイプだ。
カラーストップと繰り返し
各色はlinear-gradient(red 0%, yellow 50%, blue 100%)のようにパーセント位置に固定でき、遷移の急さや滑らかさを制御できる。repeating-linear-gradient()とrepeating-radial-gradient()は同じストップの並びを自動的に繰り返し、CSS一行で縞模様や市松模様を作り出す。
なぜ必要なのか
- 角度や色を手動で調整することなく、既製のCSSグラデーションコードを素早く選んでコピーする。
- 特定の視覚効果にどのグラデーションタイプが適しているかを理解する。
- 望む遷移のためにカラーストップの位置を正確に調整する。