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

投稿日：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);
}

テキストを虹色にする

紫ベースの虹色テキスト

CSS

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;

青ベースの虹色テキスト

CSS

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;