@ CSS

linear-gradient() メソッド

background プロパティで、linear-gradient() メソッドを使用すると線形のグラデーションを描画することができます。

format

linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);

linear-gradient() メソッドの使用例を以下に示します。

linear_gradient_horizontal

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
.gradient {
  width: 200px;
  height: 200px;
  background: linear-gradient( to right top, rgba(0,0,0,1.0), rgba(0,0,0,0) );
}
</style>
</head>

<body>
  <div class="gradient"></div>
</body>

</html>

demo

linear_gradient_diagonal

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
.gradient {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, black, white);
}
</style>
</head>

<body>
  <div class="gradient"></div>
</body>

</html>

demo