Ten Designer CSS Gradients

by

Ten Designer CSS Gradients

by

Gradients are making a big comeback in 2019 so we decided to play with some CSS code and make some designer gradients, that look great, so you don’t have to. Please feel free to copy and paste the css code.

Cherry Rust

background: rgb(47,68,100);
background: linear-gradient(90deg, rgba(47,68,100,1) 0%, rgba(151,63,63,1) 100%);

Picture Perfect

background: rgb(163,58,180);
background: linear-gradient(90deg, rgba(163,58,180,1) 0%, rgba(253,29,80,1) 50%, rgba(252,172,69,1) 100%);

Limelight

background: rgb(34,193,195);
background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(208,253,45,1) 50%, rgba(34,193,195,1) 100%);

Neon at Night

background: rgb(22,31,46);
background: linear-gradient(90deg, rgba(22,31,46,1) 0%, rgba(47,83,100,1) 47%, rgba(171,35,80,1) 100%);

Old School

background: rgb(64,136,138);
background: linear-gradient(90deg, rgba(64,136,138,1) 0%, rgba(69,84,105,1) 47%, rgba(121,68,42,1) 100%);

Candy Shock

background: rgb(53,255,227);
background: linear-gradient(90deg, rgba(53,255,227,1) 0%, rgba(197,76,255,1) 51%, rgba(255,170,53,1) 100%);

Purple Haze

background: rgb(164,92,182);
background: linear-gradient(90deg, rgba(164,92,182,1) 0%, rgba(64,92,128,1) 50%, rgba(164,92,182,1) 100%);

Sunset

background: rgb(33,33,33);
background: linear-gradient(90deg, rgba(33,33,33,1) 0%, rgba(128,44,65,1) 50%, rgba(222,178,98,1) 100%);

Pastel

background: rgb(102,207,201);
background: linear-gradient(90deg, rgba(102,207,201,1) 0%, rgba(255,210,185,1) 35%, rgba(255,195,204,1) 65%, rgba(149,255,249,1) 100%);

Metallic

background: rgb(198,198,198);
background: linear-gradient(90deg, rgba(198,198,198,1) 0%, rgba(224,224,224,1) 46%, rgba(248,248,248,1) 52%, rgba(239,239,239,1) 60%, rgba(255,255,255,1) 64%, rgba(238,238,238,1) 69%, rgba(51,51,51,1) 100%);

Comments

comments

Advertisement

Advertisement

Advertisement

Dropout Radio Tune In Now

Advertisement

Advertisement

Zyro The World's Easiest Website Builder

Get the DL

Sign up here to get the latest news from Toronto Creatives; exclusive deal offers from us and our clients; and get the first look at new content.

You have Successfully Subscribed!

Share This