《CSS》テキストにグラデーションをかける

公開日：2025年03月27日　最終更新日：2025年4月23日

CSS

CSSのbackground-clipプロパティを使って、テキストにグラデーションを適用する方法を紹介しています。

DEMO

グラデーションテキスト
グラデーションテキスト
グラデーションテキスト

HTML

<p class="text-gradient">グラデーションテキスト<br>グラデーションテキスト<br>グラデーションテキスト</p>

CSS

.text-gradient {
	background: linear-gradient(90deg, #cf5747, #e8bd20 , #cf5747);
	background-clip: text;
	color: transparent;
	display: inline-block;
}

Ad