【CSS】linear-gradientを使ってみよう

使用スタイル

linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+);

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

上から下に向かってグラデーションをかけてみます。

#to-bottom{
  background:  linear-gradient( to bottom, pink, cyan);
}

上から下へグラデーションをかけたらこうなります

ななめのグラデーション

左上にむかって（ななめに）グラデーションをかけることもできます。左下にむかってグラデーションをかけたい場合は、[to left bottom]です。

#to-left-top{
  background: linear-gradient(to left top, green, lime, white);
}

ななめのグラデーションをかけたらこうなります

角度指定のグラデーション

今まではどこにむかってグラデーションをかけるかを指定していましたが。グラデーションをかける際に角度で指定することもできます。

#deg-samp{
  background: linear-gradient( 13deg, red, orange, yellow, green, blue, indigo, violet);
  color: white;
}

角度指定のグラデーション

グラデーションを使って蛍光ペン風にアレンジ

Webで調べ物をしていると、よく蛍光ペンを引いたようなアレンジをしているところがあります。そんなアレンジもCSSだけでできちゃいます。

.sample-marker{
  background: linear-gradient( transparent 35%, yellow 35%, transparent 95%);
}

蛍光ペン風にアレンジできます。