HTML/CSSで文字をグラデーションにする

Posted at 2024-03-10

実行結果

以下の画像のように文字にグラデーションをつける方法をご紹介します。

ソースコード

■htmlファイル

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>CSSで遊ぶ</title>
</head>
<body>
<h1>文字のグラデーション</h1>
</body>
</html>

■cssファイル

h1{
	background:linear-gradient(#ff69b4,#d8bfd8);
	
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
}

CSSについて

linear-gradient(開始する色,終了する色)

第1引数の色から第2引数の色に向かって変化していきます。

background-clip

背景の適用範囲を指定できます。ここで使用しているtextは、背景を前景のテキストの中に切り取って指定できます。

text-fill-color

テキストの塗りつぶしの色を指定できます。ここではtransparentでテキストの色を透過させています。

HTML5/CSS3の学習に参考となったサイト

この記事はここまでです。呼んで

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up