25 Awesome 2 Tone CSS Gradients

This resource provides 25 awesome 2 tone CSS gradients with the CSS code to use the styles on your site, all with a base background colour.

In this post we’re providing this epic resource of 25 2 tone CSS gradients ready to use in your next design project. We’ve also written the CSS that you can copy and paste, the styles range from super bright to very subtle gradients to match any site design.

background: #5A00C5;

background: linear-gradient(0deg, #04A5C6, #5A00C5);

background: #5A00C5;

background: linear-gradient(0deg, #04A5C6, #5A00C5);

background: #BB1169;

background: linear-gradient(180deg, #BB1169, #5E2D55);

background: #E96244;

background: linear-gradient(90deg, #E96244, #C00B3A);

background: #0D89EE;

background: linear-gradient(240deg, #0D89EE, #814AE2);

background: #EFD702;

background: linear-gradient(240deg, #EFD702, #D31F53);

background: #041311;

background: linear-gradient(0deg, #041311, #093893);

background: #041311;

background: linear-gradient(180deg, #FC8875, #E6C86B);

background: #D5969F;

background: linear-gradient(90deg, #D5969F, #7C182E);

background: #D5969F;

background: linear-gradient(90deg, #226F50, #C7E9A4);

background: #F83B2F;

background: linear-gradient(180deg, #F83B2F, #8863A9);

background: #33ADBF;

background: linear-gradient(0deg, #33ADBF, #6D98DA);

background: #33ADBF;

background: linear-gradient(0deg, #33ADBF, #6D98DA);

background: #33ADBF;

background: linear-gradient(0deg, #33ADBF, #6D98DA);

background: #E35B5E;

background: linear-gradient(0deg, #E35B5E, #FCAA1D);

background: #162843;

background: linear-gradient(90deg, #162843, #05329D);

background: #DF8EF0;

background: linear-gradient(180deg, #DF8EF0, #F802B2);

background: #DF8EF0;

background: linear-gradient(180deg, #DF8EF0, #F802B2);

background: #1A67DF;

background: linear-gradient(180deg, #1A67DF, #56129B);

background: #98C3FA;

background: linear-gradient(0deg, #98C3FA, #BFF5DB);

background: #98C3FA;

background: linear-gradient(0deg, #98C3FA, #BFF5DB);

background: #98C3FA;

background: linear-gradient(0deg, #98C3FA, #BFF5DB);

background: #5EDDCB;

background: linear-gradient(180deg, #5EDDCB, #9DDFE1);

background: #98C3FA;

background: linear-gradient(0deg, #98C3FA, #BFF5DB);

background: #98C3FA;

background: linear-gradient(0deg, #98C3FA, #BFF5DB);

Summary:

Thanks for checking out this resource, we hope it was helpful with your next design or web project. Also if you found it valuable please comment and share we really appreciate it thanks!

Additional Reading:

CSS Gradients

CSS Gradients Backgrounds

CSS Button Hover

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply

Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124