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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

本日はお好きな文字に「CSSでグラデーションを適用する方法」について解説いたします。たった数行の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;
}

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

1つ目と2つ目でカラーの彩度が違うので好みも分かれそうです。もっと細かく色を指定する場合は2つ目に書いたCSSを使ってカラー番号を指定してください。カラー番号は数字6桁「#000000」でも3桁「#000」でもどちらでもOKです。厳密に言えば6桁で書くほうが多くのブラウザで綺麗に表示できます。

まとめ

文字に虹色のグラデーションを適用したい場合は本記事を参考にしてください。今回は多くのカラーを使ってグラデーションを作りましたが少ない色数でグラデーションを作っても綺麗な表現が可能です。

またCSSでカラー色を塗れば画像イメージを使わなくても良いため検索エンジンにも文字として認識されSEOでも優位に働きます。文字をおしゃれに彩りたい方はぜひお試しくださいませ。

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグイン無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する