Written by Kasumi

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で透過グラデーションを作成する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

HTML・CSSのみで開閉アコーディオンを作る【JS不要簡単】

2020.04.12
1969
HTMLCSS プログラミング

【簡単】html・cssを使ってtable(テーブル)タグを角丸にする方法

2022.02.15
488
HTMLCSS プログラミング

【簡単CSS】videoタグを使って動画を背景に設定する方法

2022.03.12
3605
HTMLCSS プログラミング

【簡単CSS】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

2022.03.27
2167