CSS Gradient Design

css gradient

Css linear-gradient-Example


           background:linear-gradient(red,yellow,hotpink);

background:linear-gradient(to top right,cyan,green,blue);

background:linear-gradient(to bottom left,hsl(330deg,50%,40%),rgb(20,30,30),blue);

background:linear-gradient(to bottom right,hotpink,orange,blue);

background:linear-gradient(to top left,red,yellow,blue);

background:linear-gradient(55deg,red,yellow,blue);

background:linear-gradient(to bottom right,
    red 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80%);

background:repeating-linear-gradient(hotpink,yellow 10%,cyan 20%);

background:linear-gradient(324deg, #3c3b6e 4%, transparent 4%) -0.7in 0.43in,
        linear-gradient(36deg, #3c3b6e 4%, transparent 4%) 0.3in 0.43in,
        linear-gradient(72deg, #fff 8.5%, transparent 8.5%) 0.3in 0.43in,
        linear-gradient(288deg, #fff 8.5%, transparent 8.5%) -0.7in 0.43in,
        linear-gradient(216deg, #fff 7.5%, transparent 7.5%) -0.7in 0.23in,
        linear-gradient(144deg, #fff 7.5%, transparent 7.5%) 0.3in 0.23in,
        linear-gradient(324deg, #3c3b6e 4%, transparent 4%) -0.2in 0.93in,
        linear-gradient(36deg, #3c3b6e 4%, transparent 4%) 0.8in 0.93in,
        linear-gradient(72deg, #fff 8.5%, transparent 8.5%) 0.8in 0.93in,
        linear-gradient(288deg, #fff 8.5%, transparent 8.5%) -0.2in 0.93in,
        linear-gradient(216deg, #fff 7.5%, transparent 7.5%) -0.2in 0.73in,
        linear-gradient(144deg, #fff 7.5%, transparent 7.5%) 0.8in 0.73in,
        #3c3b6e;
    background-size: 1in 1in;

background:-webkit-repeating-linear-gradient(45deg,red,blue 21px);

background:linear-gradient(145deg, rgb(153, 153, 164), rgb(96, 96, 107));

background:linear-gradient(145deg, rgb(255, 255, 255), rgb(7, 248, 249));

background:linear-gradient(145deg, rgb(253, 21, 251), rgb(234, 237, 238));

linear-gradient(145deg, rgb(230, 41, 118), rgb(255, 102, 164));

background:linear-gradient(145deg, rgb(56, 1, 82), rgb(153, 3, 227));

background:linear-gradient(145deg, rgb(248, 216, 0), rgb(253, 235, 113));

background:linear-gradient(145deg, rgb(0, 255, 161), rgb(0, 255, 255));

background:linear-gradient(145deg, rgb(217, 224, 33), rgb(251, 135, 43));

background:linear-gradient(145deg, rgb(133, 45, 145), rgb(49, 42, 108));

linear-gradient(145deg, rgb(107, 115, 255), rgb(0, 13, 255));

background:linear-gradient(145deg,#ffdf40,#ff8359);

background:linear-gradient(145deg,#65799B,#5E2563);

background:linear-gradient(145deg,#59c2ff,#1270e3);

background:linear-gradient(145deg,#5496ff,#8739e5);

background:linear-gradient(145deg,#aff57a,#54d159);

background:linear-gradient(145deg,#46eeaa,#2cbfc7);

background:linear-gradient(145deg,#15eded,#029cf5);

background:linear-gradient(145deg,#ff63de,#b122e5);

background:linear-gradient(145deg,#ff7c6e,#f5317f);

background:linear-gradient(145deg,#f02fc2,#6094ea);

background:linear-gradient(145deg,#65799b,#5e2563);

background:linear-gradient(145deg,#184e68,#57ca85);

background:linear-gradient(145deg,#5b247a,#1bcedf);

background:linear-gradient(145deg,#ffe530,#ff2525);

background:linear-gradient(145deg,#00cdff,#4218d8);

background:linear-gradient(145deg,#ff9897,#f650a0);

background:linear-gradient(145deg,#92ffc0,#002661);

background:linear-gradient(145deg,#f05f57,#360940);

background:linear-gradient(145deg,#fad7a1,#e96d71);

background:linear-gradient(145deg,#fff6b7,#f6416c);

background:linear-gradient(145deg,#b6c0c5,#112d60);

background:linear-gradient(145deg,#ffe998,#57370d);

background:linear-gradient(145deg,#9f879f,#f9bfda);

background:linear-gradient(145deg,#05999e,#cbe7e3);

background:linear-gradient(145deg,#58126a,#f6b2e1);

background:linear-gradient(145deg,#5b146f,#ff009c);

background:linear-gradient(145deg,#7F00FF,#E100FF);

background:linear-gradient(145deg,#232526,#414345);

background:linear-gradient(145deg,#EB3349,#F45C43);

background:linear-gradient(145deg,#69C4FF,#5AF9D4);

background:linear-gradient(145deg,#EC9F05,#FF4E00);

background:linear-gradient(145deg,#B91372,#6B0F1A);

background:linear-gradient(145deg,#5AFF15,#00B712);

background:linear-gradient(145deg,#5F72BE,#9921E8);

background:linear-gradient(145deg,#DB3445,#F71735);

background:linear-gradient(145deg,#6D17CB,#2876F9);

background:linear-gradient(145deg,#24F794,#20BA3E)

background:linear-gradient(145deg,#56ab2f,#a8e063);

background:linear-gradient(145deg,#aa076b,#61045f);

background:linear-gradient(145deg,#A1C4FD,#C2E9FB);

background:linear-gradient(145deg,#42E695,#3BB2B8);

background:linear-gradient(145deg,#13F1FC,#0470DC);

background:linear-gradient(145deg,#F5515F,#A1051D);

Css radial-gradient-Example

background:radial-gradient(red,yellow,blue);

background:radial-gradient(red 10%,yellow,30% ,blue);

background:radial-gradient(circle,cyan,yellow,blue);

background:repeating-radial-gradient(ellipse,red,yellow 10%,hotpink 30%);

background:radial-gradient(closest-side at 30% 50%,red,yellow,blue);

background:radial-gradient(farthest-side at 30% 50%,red,yellow,blue);

background:radial-gradient(closest-corner at 50% 50%,
    red 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80%);

background:radial-gradient(farthest-corner at 50% 40%,hotpink,yellow,cyan);

background:
    radial-gradient(
        blue,
        blue 50%,
        transparent 50%,
        transparent 10%
    ),
    radial-gradient(
        cyan,
        cyan 50%,
        transparent 50%,
        transparent 100%
    ),
    radial-gradient(
        yellow,
        purple 40%,
        transparent 40%,
        transparent 100%
    ), floralwhite;

background-size:
    8em 8em,
    6em 6em,
    1em 1em;

background-blend-mode: multiply;
background-position:
    0 0,
    -33% -33%,
    -200% -200%;

background-image: repeating-radial-gradient(black, blue 10%, plum 15%);

body {   background:
    radial-gradient(
        rgba(255,255,255,.2) 20%,
        rgba(128,0,128,.4) 31%,
        rgba(128,0,128,.4) 35%,
        rgba(255,255,255,.2) 36%,
        rgba(255,255,255,.2) 40%,
        rgba(128,0,128,.4) 51%,
        rgba(128,0,128,.4) 55%,
        rgba(255,255,255,.2) 56%),
    radial-gradient(
        rgba(255,255,255,.2) 20%,
        rgba(0,0,139,.4) 31%,
        rgba(0,0,139,.4) 35%,
        rgba(255,255,255,.2) 36%,
        rgba(255,255,255,.2) 40%,
        rgba(0,0,139,.4) 51%,
        rgba(0,0,139,.4) 55%,
        rgba(255,255,255,.2) 56%),
    radial-gradient(
        rgba(255,255,255,.2) 20%,
        rgba(220,20,60,.4) 31%,
        rgba(220,20,60,.4) 35%,
        rgba(255,255,255,.2) 36%,
        rgba(255,255,255,.2) 40%,
        rgba(220,20,60,.4) 51%,
        rgba(220,20,60,.4) 55%,
        rgba(255,255,255,.2) 56%),
    radial-gradient(
        rgba(255,255,255,.2) 20%,
        rgba(255,69,0,.4) 31%,
        rgba(255,69,0,.4) 35%,
        rgba(255,255,255,.2) 36%,
        rgba(255,255,255,.2) 40%,
        rgba(255,69,0,.4) 51%,
        rgba(255,69,0,.4) 55%,
        rgba(255,255,255,.2) 56%),
    radial-gradient(
        rgba(255,255,255,.2) 20%,
        rgba(255,215,0,.4) 31%,
        rgba(255,215,0,.4) 35%,
        rgba(255,255,255,.2) 36%,
        rgba(255,255,255,.2) 40%,
        rgba(255,215,0,.4) 51%,
        rgba(255,215,0,.4) 55%,
        rgba(255,255,255,.2) 56%),
    radial-gradient(
        rgba(255,255,255,.2) 20%,
        rgba(154,205,50,.4) 31%,
        rgba(154,205,50,.4) 35%,
        rgba(255,255,255,.2) 36%,
        rgba(255,255,255,.2) 40%,
        rgba(154,205,50,.4) 51%,
        rgba(154,205,50,.4) 55%,
        rgba(255,255,255,.2) 56%),
    radial-gradient(
        rgba(255,255,255,.2) 20%,
        rgba(70,130,180,.4) 31%,
        rgba(70,130,180,.4) 35%,
        rgba(255,255,255,.2) 36%,
        rgba(255,255,255,.2) 40%,
        rgba(70,130,180,.4) 51%,
        rgba(70,130,180,.4) 55%,
        rgba(255,255,255,.2) 56%
    ), orangered;

    background-size:
        13em 13em,
        11em 11em,
        5em 5em,
        11em 11em,
        7em 7em,
        5em 5em,
        3em 3em,
        1em 1em;
    background-position:
        50% 50%,
        20% 20%,
        30% 30%,
        70% 70%;
    background-blend-mode:
        overlay,
        normal,
        hard-light,
        overlay,
        multiply,
        soft-light;
}

Css conic-gradient-Example

background:conic-gradient(red,yellow,hotpink);

background:conic-gradient(from 90deg,red,green,blue);

background:conic-gradient(at 50% 75%,purple,cyan,gold);

background:conic-gradient(from 90deg at 20% 80%,red,yellow,blue);

background-image: repeating-conic-gradient(red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);

background: repeating-conic-gradient( from 3deg at 25% 25%, green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg );

background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, hotpink 180deg,hotpink 270deg, blue 270deg);

background:conic-gradient(from 90deg,red 0deg,red 45deg,yellow 45deg,yellow 90deg,blue 90deg,blue 180deg,hotpink 180deg,hotpink 360deg);

background:conic-gradient(
      #fff 0.25turn,
      #000 0.25turn 0.5turn,
      #fff 0.5turn 0.75turn,
      #000 0.75turn
    )
    top left / 25% 25% repeat;

Css multiple gradient Example

background:linear-gradient(30deg, #f0f8ff 12%, transparent 12.5%, transparent 87%, #f0f8ff 87.5%, #f0f8ff),
linear-gradient(150deg, #f0f8ff 12%, transparent 12.5%, transparent 87%, #f0f8ff 87.5%, #f0f8ff),
linear-gradient(30deg, #f0f8ff 12%, transparent 12.5%, transparent 87%, #f0f8ff 87.5%, #f0f8ff),
linear-gradient(150deg, #f0f8ff 12%, transparent 12.5%, transparent 87%, #f0f8ff 87.5%, #f0f8ff),
linear-gradient(60deg, #87ceeb 25%, transparent 25.5%, transparent 75%, #87ceed 75%, #87ceeb), 
linear-gradient(60deg, #87ceeb 25%, transparent 25.5%, transparent 75%, #87ceeb 75%, #87ceeb) #c1e1ec;
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;

background: repeating-linear-gradient(-45deg, transparent 0, transparent 60px, #C37E18 60px, #C37E18 75px), repeating-linear-gradient(45deg, transparent 0, transparent 60px, #C37E18 60px, #C37E18 75px), #E1A041;
background-size: 212px 212px;

background:
        radial-gradient(
            circle closest-side,
            transparent 66%,
            red 0
        ),
        conic-gradient(
            #4e79a7 0,
            #4e79a7 14.3%,
            #f28e2c 0,
            #f28e2c 28.6%,
            #0000ff 0,
            #0000ff 42.9%,
            #76b7b2 0,
            #76b7b2 57.2%,
            #59a14f 0,
            #59a14f 71.5%,
            #edc949 0,
            #edc949 85.8%,
            #af7aa1 0,
            #af7aa1 100%
    );

background:
    repeating-linear-gradient(
        50deg,
        #F7A37B,
        #F7A37B 1em,
        #FFDEA8 1em,
        #FFDEA8 2em,
        #D0E4B0 2em,
        #D0E4B0 3em,
        #7CC5D0 3em,
        #7CC5D0 4em,
        #00A2E1 4em,
        #00A2E1 5em,
        #0085C8 5em,
        #0085C8 6em
    ),
    repeating-linear-gradient(
        -50deg,
        #F7A37B,
        #F7A37B 1em,
        #FFDEA8 1em,
        #FFDEA8 2em,
        #D0E4B0 2em,
        #D0E4B0 3em,
        #7CC5D0 3em,
        #7CC5D0 4em,
        #00A2E1 4em,
        #00A2E1 5em,
        #0085C8 5em,
        #0085C8 6em
    );
    
background-blend-mode: multiply;

background:
    repeating-radial-gradient(
        circle,
        transparent,
        transparent 3.5em,
        tomato 3.5em,
        tomato 4.5em
    ),
    repeating-radial-gradient(
        circle,
        transparent,
        transparent 3.5em,
        dodgerblue 3.5em,
        dodgerblue 4.5em
    ),
    repeating-radial-gradient(
        circle,
        transparent,
        transparent 2.5em,
        gold 2.5em,
        gold 2.75em
    ), floralwhite;

background-blend-mode: multiply;
background-size: 10em 10em;
background-position:
    0 0,
    5em 5em,
    10em 5em;

background:
    radial-gradient(
        yellow,
        yellow 50%,
        transparent 50%,
        transparent 100%
    ),
    radial-gradient(
        cyan,
        cyan 50%,
        transparent 50%,
        transparent 100%
    ),
    radial-gradient(
        magenta,
        magenta 40%,
        transparent 40%,
        transparent 100%
    ), floralwhite;

background-size:
    8em 8em,
    6em 6em,
    2em 2em;

background-blend-mode: multiply;
background-position:
    0 0,
    -33% -33%,
    -200% -200%;

background:
    radial-gradient(
        transparent 0,
        transparent 2em,
        lightblue 2em,
        lightblue 2.5em,
        transparent 2.5em,
        transparent 100%
    ),
    radial-gradient(
        transparent 0,
        transparent 2em,
        aquamarine 2em,
        aquamarine 2.5em,
        transparent 2.5em,
        transparent 100%
    ),
    radial-gradient(
        transparent 0,
        transparent 2em,
        khaki 2em,
        khaki 2.5em,
        transparent 2.5em,
        transparent 100%
    ),
    radial-gradient(
        transparent 0,
        transparent 2em,
        pink 2em,
        pink 2.5em,
        transparent 2.5em,
        transparent 100%
    ), linen;


background-blend-mode: multiply;
background-size: 5em 5em;
background-position:
    0 2.5em,
    2.5em 0,
    2.5em 2.5em,
    0 0;

background:
    radial-gradient(
            at bottom right,
            dodgerblue 0,
            dodgerblue 1em,
            lightskyblue 1em,
            lightskyblue 2em,
            deepskyblue 2em,
            deepskyblue 3em,
            gainsboro 3em,
            gainsboro 4em,
            lightsteelblue 4em,
            lightsteelblue 5em,
            deepskyblue 5em,
            deepskyblue 6em,
            lightskyblue 6em,
            lightskyblue 7em,
            transparent 7em,
            transparent 8em
        ),
        radial-gradient(
            at top left,
            transparent 0,
            transparent 1em,
            lightskyblue 1em,
            lightskyblue 2em,
            deepskyblue 2em,
            deepskyblue 3em,
            lightsteelblue 3em,
            lightsteelblue 4em,
            gainsboro 4em,
            gainsboro 5em,
            deepskyblue 5em,
            deepskyblue 6em,
            skyblue 6em,
            skyblue 7em,
            dodgerblue 7em,
            dodgerblue 8em,
            transparent 8em,
            transparent 20em
        ),
        radial-gradient(
            circle at center bottom,
            coral, darkslateblue
        );
    background-blend-mode: overlay;
    background-size:
        8em 8em, 8em 8em, cover;

background-image:
    repeating-linear-gradient(
        90deg,
        firebrick,
        firebrick 20px,
        beige 0,
        beige 25px,
        forestgreen 0,
        forestgreen 35px,
        gold 0,
        gold 40px,
        crimson 0,
        crimson 60px
    ),
    repeating-linear-gradient(
        firebrick,
        firebrick 20px,
        beige 0,
        beige 25px,
        forestgreen 0,
        forestgreen 35px,
        gold 0,
        gold 40px,
        crimson 0,
        crimson 60px
    );
background-blend-mode: multiply;

background:
        radial-gradient(
            circle closest-side,
            red 0,
            brown 10%,
            lightblue 0,
            green 20%,
            yellow 0,
            hotpink
             30.6%,
             white 0,
             black 50%,
            transparent 33.6%,
            transparent 98%,
            cyan 0
        ),
        conic-gradient(
            from 183deg,
            #4e79a7 0,
            #4e79a7 14.3%,
            #f28e2c 0,
            #f28e2c 28.6%,
            #0000ff 0,
            #0000ff 42.9%,
            #76b7b2 0,
            #76b7b2 57.2%,
            #59a14f 0,
            #59a14f 71.5%,
            #edc949 0,
            #edc949 85.8%,
            #af7aa1 0,
            #af7aa1 100%
    );

background:
        linear-gradient(to bottom right,
            red 0,
            brown 10%,
            lightblue 0,
            green 20%,
            yellow 0,
            hotpink
             30.6%,
             white 0,
             black 50%,
            transparent 33.6%,
            transparent 80%,
            cyan 0%
        ),
        conic-gradient(
            from 183deg,
            #4e79a7 0,
            #4e79a7 14.3%,
            #f28e2c 0,
            #f28e2c 28.6%,
            #0000ff 0,
            #0000ff 42.9%,
            #76b7b2 0,
            #76b7b2 57.2%,
            #59a14f 0,
            #59a14f 71.5%,
            #edc949 0,
            #edc949 85.8%,
            #af7aa1 0,
            #af7aa1 100%
    );

background:
        radial-gradient(
            circle closest-side,
            red 0,
            brown 10%,
            lightblue 0,
            green 20%,
            yellow 0,
            hotpink
             30.6%,
             white 0,
             black 50%,
             cyan 0%,
             purple 70%,
             white 0%,
             red 85%,
            transparent 33.6%,
            transparent 98%,
            cyan 0
        ),
        conic-gradient(
            from 183deg,
            #4e79a7 0,
            #4e79a7 14.3%,
            #f28e2c 0,
            #f28e2c 28.6%,
            #0000ff 0,
            #0000ff 42.9%,
            #76b7b2 0,
            #76b7b2 57.2%,
            #59a14f 0,
            #59a14f 71.5%,
            #edc949 0,
            #edc949 85.8%,
            #af7aa1 0,
            #af7aa1 100%
    );

background:radial-gradient(red 20%,blue 20% 40%,hotpink 40% 60%,green 60% 80%,yellow 80% 100%,transparent 50%,transparent 100%),radial-gradient(circle,red,yellow,blue) repeat;
            background-size:30px 30px,200px 200px;

background:radial-gradient(red 0,
            brown 10%,
            lightblue 0,
            green 20%,
            yellow 0,
            hotpink
             30.6%,
             white 0,
             black 50%,
             cyan 0%,
             purple 70%,
             white 0%,
             red 85%,
            cyan 0,green 100%),radial-gradient(circle,red,yellow,blue) repeat;
            background-size:40px 40px,20px 20px;

background: repeating-linear-gradient(360deg, rgba(0, 255, 255, 0) 58%, rgba(255, 0, 0, 0) 71%, rgba(255, 0, 255, 0) 100%, rgba(0, 0, 255, 0) 47%, rgba(0, 255, 255, 0) 9%) 322px, radial-gradient(ellipse farthest-corner at Center , rgba(255, 0, 0, 0.23) 72%, rgba(255, 255, 0, 0) 4%, rgba(0, 255, 0, 0) 80%, rgba(0, 255, 255, 1) 16%), linear-gradient(to right, rgba(255, 0, 0, 1) 100%, rgba(255, 255, 0, 1) 100%, rgba(0, 255, 0, 1) 100%), rgba(0, 0, 0, 0.07);
background-blend-mode: lighten;
background-size: 100px 100px,50px 50px;
background-position:Center;

background: repeating-linear-gradient(360deg, rgba(0, 255, 255, 0) 58%, rgba(255, 0, 0, 0) 71%, rgba(255, 0, 255, 0) 100%, rgba(0, 0, 255, 0) 47%, rgba(0, 255, 255, 0) 9%) 322px, radial-gradient(ellipse farthest-corner at Center , rgba(255, 255, 255, 0.87) 36%, rgba(255, 255, 0, 0.34) 4%, rgba(0, 255, 0, 0.84) 80%, rgba(255, 0, 0, 1) 6%), repeating-radial-gradient(circle closest-side at Center , rgba(255, 0, 0, 0.17) 13%, rgba(255, 255, 255, 0.36) 16%, rgba(255, 255, 0, 0.36) 31%) 117px, rgba(0, 0, 0, 0.07);
background-blend-mode: lighten;
background-size: 100px 100px,50px 50px;
background-position: Center;