【コピペでOK】テキスト文字を虹色でグラデーション化できるCSS

こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。

本日はお好きな文字に「CSSでグラデーションを適用する方法」について解説いたします。たった数行のCSSで作るだけなのでコピペするだけでデザインを利用できます。ぜひご活用くださいませ。

【コピペでOK】テキスト文字を虹色でグラデーション化できるCSS
- 彩度を上げた虹色カラー
- 彩度を抑えた虹色カラー
まとめ

【コピペでOK】テキスト文字を虹色でグラデーション化できるCSS

まずは虹色にするためのCSSをご紹介いたします。まずはカラー指定を英文字で行なっています。番号指定とは違って細かいカラーにはなりませんが虹色を再現するだけであれば十分事足ります。

彩度を上げた虹色カラー

.rainbowA {
	background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
	background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet);
	background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
	background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;  
}

上記のCSSを適用したパターンが以下です。

彩度を抑えた虹色カラー

次に少しトーンを落としたパターンの虹色です。

.rainbowB {
	background: linear-gradient(to right, #f00 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
	background: -webkit-linear-gradient(left, #f00 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
	background: -o-linear-gradient(right, #f00 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
	background: -moz-linear-gradient(right, #f00 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
}

上記のグラデーションを適用したパターンが以下です。