同じ2色でも見た目が違う？ CSSグラデーションの新しい補間方法まとめ
DRANK
美しいグラデーションづくりで鍵になるのは、色そのものと、色と色をつなぐ「補間」です。たとえ2色のシンプルなグラデーションでも、補間の仕方しだいで中間色がくすみ、意図しない印象になってしまいます。CSSグラデーションでは色の補間方法を指定できます。
3 comments
美しいグラデーションづくりで鍵になるのは、色そのものと、色と色をつなぐ「補間」です。たとえ2色のシンプルなグラデーションでも、補間の仕方しだいで中間色がくすみ、意図しない印象になってしまいます。CSSグラデーションでは色の補間方法を指定できます。
以前、ICS MEDIAでもCSSの新しいoklchを説明しましたが、雀の涙のアクセス数でした。
CSSグラデーションの新しい補間方法まとめ - ICS MEDIA ics.media/entry/250829/
「色」に対するウェブ制作者の関心が低いかもしれませんが、美しい配色に役立つので積極的に使いたいところ。
次のように虹色のグラデを1行で作れます。
background: linear-gradient(90deg in hsl longer hue, red, red); pic.x.com/dbFGvPLoml
ICS MEDIAで記事が公開されました。
おなじみのCSSのlinear-gradient()は新しい指定ができて、中間の濁りをおさえることができてオススメ、という話です。
linear-gradient(in oklab, 〇, 〇); といった新しい指定方法のキャッチアップにお役立てください！
ics.media/entry/250829/
担当：澤田悠