tellogs.com

リニアグラデーション

グラデーション生成

リニアグラデーションは、CSSのlinear-gradient()関数で作成する最も基本的なグラデーションです。直線上に色が変化する効果で、Webデザインにおいて最も多く使用されるグラデーションの一種です。方向を指定するだけで、様々なパターンを作成できます。

角度の指定方法には、度数(deg)の他に、キーワードがあります。to rightで左から右、to bottomで上から下へのグラデーションになります。斜め方向は45degや135degなどで指定でき、微妙な角度の変化で印象が大きく変わります。

リニアグラデーションは、ボタンやヘッダーの背景、セクションの区切り、カードのオーバーレイなど、様々な場面で活用できます。色の遷移を急激にすればストライプ状のパターンにもでき、繰り返し(repeating-linear-gradient)と組み合わせることで模様のような表現も可能です。Web背景ページでより多くの活用例を紹介しています。

グラデーション生成を使ってみましょう

このページの内容を、グラデーション生成で実際に試してみましょう。

グラデーション生成を開く