CSS | テキストに透過グラデーションをかける方法

2022-06-25CSS テキスト,CSS

CSSでテキストに透過グラデーションをかける方法と動作サンプルを紹介しています。

テキストに透過グラデーションをかける

CSSで使ってテキストに透過グラデーションをかける動作サンプルとサンプルコードになります。

See the Pen CSS | Translucent text by yochans (@yochans) on CodePen.

サンプルのHTMLでは透過グラデーションをかける用にclass名「transparent」を付けた<span>タグを設置しています。

<p>
	<span class="transparent">Transparent gradation text</span>
</p>

class名「transparent」にて「color（文字色）」に「transparent（透明）」を指定、「background（背景）」に「linear-gradient()」でグラデーションを付けています。

「-webkit-background-clip: text;」でテキストの形で背景を切り抜いています。

.transparent {
	font-size: 30px;
	font-weight: bold;
	color: transparent;
	background: linear-gradient( 90deg, #000 0, transparent 110% );
	-webkit-background-clip: text;
}