IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

【CSS】背景色 グラデーション --サンプル集-- | background:linear-gradient 【WEBデザイン】

css グラデーション 虹色 テキスト



投稿日:2019/07/19

CSSのbackgroundプロパティに指定する複雑な値を、備忘録として書き記している記事です。

CSSの背景色に使用する虹色のカラーを集めました。テキストを虹色にするためのCSSサンプルコードもあります。

 

虹色

 

 

<div class="style1"></div>
.style1{
    background: linear-gradient(135deg,rgb(255, 0, 0),rgb(255, 20, 172),rgb(90, 40, 255),
    rgb(60, 120, 255),rgb(80, 255, 237),rgb(100, 255, 169),
    rgb(170, 255, 120),rgb(221, 255, 140),rgb(255, 236, 160),
    rgb(255, 208, 180),rgb(255, 208, 200),#ff0000);
}

 

テキストを虹色にする

紫ベースの虹色テキスト

text-shadow: 0 0 3px #00000040;
background-image: linear-gradient(
268deg, #7100ff 0%, #c325dd 20%, #ffe65c 40%, #ef17d2 60%, #7627ed 80%, #ff55c8 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;

 

青ベースの虹色テキスト

text-shadow: 0 0 3px #00000040;
background-image: linear-gradient(
        268deg,
        #00f0ff 0%,
        #2529dd 20%,
        #5cdeff 40%,
        #1757ef 60%,
        #27edde 80%,
        #74ff55 100%
      );
background-clip: text;
-webkit-background-clip: text;
color: transparent;