《CSS》テキストにグラデーションをかける
公開日:2025年03月27日 最終更新日:2025年4月23日
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;
}