今まであまり使ったことがなかった 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 プロパティを使ったグラデーションで透過を適用する方法についてでした。
ご参考になれば幸いです。
