1. ホーム /
  2. CSS /
  3. gradient（グラデーション）の使用例

gradient（グラデーション）の使用例

グラデーションを指定するgradientの使用例と説明です。
background に指定することでボックスの背景に線形グラデーションを表現できます。
ベンダープレフィックス（-moz-,-webkit-）を付け古いバージョンのブラウザ対策はもういらないかもしれません。
一応、下記サンプルはベンダープレフィックス付きで。


background:linear-gradient(#4bcdf4, #0358ba);
background:-moz-linear-gradient(top, #4bcdf4, #0358ba);  /* Firefox用 */
background:-webkit-gradient(linear, left top, left bottom, from(#4bcdf4), to(#0358ba));  /* Google Chrome,Safari用 */

上記CSSスタイルをあてた状態（上から下に指定したカラーにグラデーション）

グラデーション例

※最新バージョンのブラウザが対象であれば、１行目だけでもOKっぽい。

参考：CSS グラデーションの使用 – MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients