株式会社シーポイントラボ | 浜松のシステム・RTK-GNSS開発

【CSS】linear-gradientを使ったグラデーションで透過を適用する

今まであまり使ったことがなかった CSS のプロパティ linear-gradient を、今回ちょっとだけですが触ったのでまとめ。

参考にさせていただいた記事はこちらです。

CSSのグラデーション(linear-gradient)の使い方を総まとめ!
https://saruwakakun.com/html-css/basic/linear-radial-gradient

 

で、今回やりたかったのが、タイトルにも書いたとおり、linear-gradient プロパティで半透明の色を指定する方法です。
サンプルコードはこちら。
ほとんど上記の参考サイトのコードを転載させていただいておりますが、個人的に色が分かりにくいと感じたので、オレンジではなく紫掛かった紺色にしています。

body {
  background-color: gray;
  margin: 0;
}
#blue-gradation {
  width: 100vw;
  height: 100vh;
  background: -moz-linear-gradient(top, #4d5aaf, rgba(255, 0, 0, 0.1));
  background: -webkit-linear-gradient(top, #4d5aaf, rgba(255, 0, 0, 0.1));
  background: linear-gradient(to bottom, #4d5aaf, rgba(255, 0, 0, 0.1));
}

なお、透明度が分かりやすいように、<body> の背景色にはグレーを設定しています。
このように設定すると、Web 上では下記のように表示されます。

スクリーンショットを見れば分かるとおり、画面上から紺色〜赤のグラデーションになっています。
で、下の方に行くに従って透過していくので、徐々に背景のグレーが透けて見えます。

こちらの透過処理は、linear-gradient プロパティ内の rgba(255, 0, 0, 0.1) で指定しています。
他のサンプルコードでは、色コードで指定しているのをよくみていたので、てっきり色コードでしか指定できないと思い込んでいたのですが、rgba() もOKなのですね!
今後、是非使ってみたいと思います!

 

以上、CSS で linear-gradient プロパティを使ったグラデーションで透過を適用する方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)