【コピペで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でも優位に働きます。文字をおしゃれに彩りたい方はぜひお試しくださいませ。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください