《CSS》テキストにグラデーションをかける
公開日:2025年03月27日 最終更新日:2025年3月27日
background-clipを使ってテキストにグラデーションをかけます。
DEMO
グラデーションテキスト
グラデーションテキスト
グラデーションテキスト
HTML
<p class="text-gradient">グラデーションテキスト<br>グラデーションテキスト<br>グラデーションテキスト</p>
CSS
.text-gradient {
background: linear-gradient(90deg, #cf5747, #cfbc47 , #cf5747);
background-clip: text;
color: transparent;
display: inline-block;
}