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
3656
HTMLCSS

CSSで要素が空かどうか判別。任意のスタイルを適用する方法

2023.04.16
996
HTMLCSS プログラミング

【簡単】CSSを使って蛍光マーカー風の下線を引く方法【linear-gradientを使おう】

2022.03.28
799
HTMLCSS

画像をPCとスマホで切り替える方法【結論:picture要素を使おう】

2022.06.25
1281