【CSS】テキストにグラデーションをかける方法

タグ :

background-clip: text;と-webkit-text-fill-color: transparent;を使用する

background-clip: text;と-webkit-text-fill-color: transparent;を使用すると、グラデーション背景がテキストにクリップされ、
テキストが背景のグラデーションを反映して表示されます。

background-clip: text;

background-clipプロパティは、背景がどこに適用されるかを指定します。このプロパティにはいくつかの値がありますが、textを指定すると、背景がテキストの領域にクリップされ、テキスト自体が背景として表示されます。

-webkit-text-fill-color: transparent;

-webkit-text-fill-colorプロパティは、テキストの塗りつぶし色を指定します。これは主にWebKitベースのブラウザ（例：ChromeやSafari）で使用されるベンダープレフィックス付きのプロパティです。transparentを指定すると、テキストの塗りつぶしが透明になります。

Gradation



.gradient-text {
font-size: 12vw;
font-weight: bold;
color: #111;
background:linear-gradient(90deg,#19d9f9 0%,#ffe140 50%,#ff357f 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
}

前ページに戻る