Web blog WEBブログ

CSSでグラデーションを表示する

2019.01.03

こんにちは。コーダーの兼山です。

CSSのグラデーションを表示するlinear-gradientを使用し、
グラデーションで表示する基本的なパターンをご紹介します。

2色で分割する

この方法であればウィンドウ幅に影響せず、
中心を区切りに背景色が2分割されます。

左から右へグラデーション

0%がスタート位置、100%がゴール位置として、
左から右へグラデーション表示されます。

右から左へグラデーション

100%がスタート位置、0%がゴール位置として、
右から左へグラデーション表示されます。

上から下へグラデーション

0%がスタート位置、100%がゴール位置として、
上から下へグラデーション表示されます。

下から上へグラデーション

100%がスタート位置、0%がゴール位置として、
下から上へグラデーション表示されます。

左上から右下に向かってグラデーション

この方法で指定できるのは45度のグラデーションだけです。
斜め具合を調整することはできません。

円形グラデーション

ここでは、radial-gradient()を使用します。

グラデーションの片側を透明にする

transparentを指定することで、段々と透明になります。

写真にグラデーションを重ねる

この画像を背景にオーバーレイさせます。


 gradientの後にカンマ区切りでurl()を指定します。

解説

CSSでグラデーションを表示するには、
linear-gradientを使用します。

【書式】
background:linear-gradient(to 方向, 開始色, 終了色);
background: -moz-linear-gradient(開始位置, 開始色, 終了色);
background: -webkit-linear-gradient(開始位置, 開始色, 終了色);

【方向角度(グラデーションの向き)】
↑ (下から上へ) 0deg to top
→ (左から右へ) 90deg to right
↓ (上から下へ) 180deg to bottom
← (右から左へ) 270deg to left

 

※ 角度ではなくキーワードで指定することも可能。
※ 方向角度を省略した場合は自動的に to bottom(180deg) となります。

まとめ

デザインの再現に悩んだ際、
この方法で解決できた事案が幾つかありました。

便利ですので、是非ご活用ください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口