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

tableのtd・thタグ内テキストが改行されない原因と解決方法

2022.06.06
6290
HTMLCSS プログラミング

CSSで画像の高さを一律にそろえる方法【結論:object-fitを使えば簡単です】

更新日:2021.01.08
6686
HTMLCSS jQuery

【簡単】モーダルウィンドウをCSS、jqueryで作る方法

更新日:2022.09.09
772
HTMLCSS

APIを使わず、GoogleMapを白黒でサイトに埋め込む方法

更新日:2022.06.08
1335