CSSのみで背景や文字にグラデーションの設定を行うことができます

カラーグラデーションのCSS設定

.gradation_1 {
background : linear-gradient(90deg, #0454af, #8adee6);
}

▼gradation_1のカラーグラデーション

  • linear-gradient　直線的なグラデーション
  • radial-gradient　円形・放射状のグラデーション(degの指定は不要)
  • deg　グラデーションの角度
  • #0454af, #8adee6　カラーの指定

直線的な場合、左のカラー〜右のカラーとなります。
角度が、-マイナスの場合はカラーの指定の並び順が逆になります。
また、3色のカラーグラデーションの場合は、,カンマ区切りでカラーの指定を追記します。

画像の上に透過のカラーグラデーションを重ねて色付け

▼モノトーンの海の画像

カラーグラデーションのCSS設定
.gradation_2 {
background: linear-gradient(180deg, rgba(138, 222, 230, .8), rgba(4, 84, 175, .8)),
url(背景画像の指定);
}
  • rgba　透明度の指定

光の三原色RGB(アールジービー)を10進数の3桁 ( 0〜255までの256の数値 ) で表し、
rgbの最後のa ( アルファ値=透明度、8は不透明度80% ) を記述します。

▼モノトーンの海の画像にカラーグラデーションの透過設定