グラデーション

2022年5月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はグラデーションをかける方法について調べました。

グラデーションは3種類ある

① 線形グラデーション

線形グラデーションとは、一方向にグラデーションさせる方法です。

linear-gradientを使います。

background: linear-gradient(to 方向, 開始色, 終了色);

.linear1 {
  background: linear-gradient(to bottom, #007bff, #fff);
}

横方向にもできます。

.linear2 {
  background: linear-gradient(to right, #dc3545, #ffc107);
}

斜めにもできます。

.linear3 {
  background: linear-gradient(to bottom right, #fff, #28a745);
}

複数の色を指定できます。

.linear4 {
  background: linear-gradient(to top, #40e0d0, #ff8c00, #ff0080);
}

％で区切ることもできます。
グラデーションというか縞模様。

.linear5 {
   background: linear-gradient(to bottom, #ff7f7f 0% 14.28%, #ffbf7f 14.28% 28.56%, #ffff7f 28.56% 42.84%, #7fff7f 42.84% 57.12%, #7fffff 57.12% 71.4%, #7fbfff 71.4% 85.68%, #7f7fff 85.68% 100%);
}

② 円形グラデーション

円形グラデーションとは、真ん中から周りに向かって放射状にグラデーションさせる方法です。

radial-gradientを使います。

background: radial-gradient(中心の色, 周りの色);

.radial1 {
  background: radial-gradient(#fff, #17a2b8);
}

複数の色を指定できます。

.radial2 {
  background: radial-gradient(red, yellow, green, blue);
}

中心点の位置をatで変更できます。

ellipseで楕円形、circleで円形

大きさをclosest-side、closest-corner、farthest-side、farthest-cornerの中から選ぶことができます。

.radial3 {
  background: radial-gradient(ellipse closest-side at 10% 90%, red, blue);
}

.radial4 {
  background: radial-gradient(ellipse closest-corner at 10% 90%, red, blue);
}

.radial5 {
  background: radial-gradient(ellipse farthest-side at 10% 90%, red, blue);
}

.radial6 {
  background: radial-gradient(ellipse farthest-corner at 10% 90%, red, blue);
}

③ 扇形グラデーション

扇形グラデーションとは、中心点の周りをグラデーションさせる方法です。

conic-gradientを使います。

background: conic-gradient(開始色, 終了色);

.conic1 {
  background: conic-gradient(#fff, #333);
  border-radius: 50%;
}

複数の色を指定できます。
謎の光沢感。

.conic2 {
  background: conic-gradient(purple, blue, aqua, green, yellow, orange, red);
  border-radius: 50%;
}

％で区切れば円グラフができます。

.conic3 {
  background: conic-gradient(#007bff 0% 35%, #28a745 35% 65%, #ffc107 65% 90%, #dc3545 90% 100%);
  border-radius: 50%;
}

ベンダープレフィックス

linear-gradientは一応ベンダープレフィックスを併記するのがいいみたいです。

mozやwebkitでは方向ではなく開始位置を書く必要があります。

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

.linear1 {
  background: -moz-linear-gradient(top, #007bff, #fff);
  background: -webkit-linear-gradient(top, #007bff, #fff);
  background: linear-gradient(to bottom, #007bff, #fff);
}

画像にグラデーションを重ねる

画像にグラデーションを重ねるとオシャレですね。

色は透明度を調整するためにrgbaで指定します。

background-size:coverと指定すると、画像にぴったりはまってくれます。

background: linear-gradient(to 方向, 開始色, 終了色), url(画像のパス);
background-size: cover;

.cat_gradient {
  background: linear-gradient(to top, rgba(217, 175, 217, 0.7) 0%, rgba(151, 217, 225, 0.7) 100%), url(img/cat.jpg);
  background-size: cover;
}

文字の色をグラデーション

background-clipとtext-fill-colorを使います。

color: 非対応の場合の文字色;
background: -webkit-linear-gradient(角度, 開始色, 終了色);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

.text-gradient {
  color: #32bdeb;
  background: -webkit-linear-gradient(0deg, #32bdeb, #ff1493);			
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

ページの背景にグラデーション

bodyに対してbackground指定するだけやん...と思ったら意外と苦戦しました。

擬似要素とposition:fixedを使います。

body:before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: 非対応の場合の背景色;
  background: linear-gradient(グラデーションの内容)
}

左メニュー下のスイッチを押してみてください。

まとめ

グラデーションはボタンや線の色にも応用できそうです。

ファ〇ナルファ〇タジーのメニュー画面はⅥが一番好きです！