Ten Designer CSS Gradients


Ten Designer CSS Gradients


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%);


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%);


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%);


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%);


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%);



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