CSSで透過グラデーションを作成する方法
CSSで透過グラデーションを作成したい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
実装サンプル
See the Pen
CSS透過グラデーション by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
左から右、右から左にオブジェクトの色がグラデーションのように透過されています。
実装手順は以下の通りです。
CSSで透過グラデーションをかける
.gradation {
background: linear-gradient(to right, #1d5342 50%, rgba(29,83,66,0.6) 100%);
}
CSSで透過グラデーションをかけるコード例です。
透過グラデーションをかけるにはbackgroundプロパティのlinear-gradientを使います。
以下のように値を入れて透過グラデーションを作成します。
linear-gradient(グラデーションの向き, 色 割合, 透過色 割合);
最初にグラデーションの向き・色・割合を決めます。
次に透過色を指定。
透過色は最初に指定した色をrgbaで半透明にします。
最後に透過色の割合を指定すればOK。
透過グラデーションの完成です。
まとめ
CSSで透過グラデーションを作成する方法について紹介しました。
以上で解説を終わります。
目次