DEV Community

Cover image for 15 Beautiful Color Gradients using CSS
Ashique Billa Molla
Ashique Billa Molla

Posted on

15 Beautiful Color Gradients using CSS

#css #webdesign #webdev

👋, I am here with another list. In this post I have enlisted 15 aesthetic color gradients using CSS (examples of colour gradients in CSS) which you can implement in your next projects.

I have used linear-gradient method of CSS and only the gradient direction 'to bottom left'. There are many others gradient directions like 'to right', 'to top' etc. to read about the linear-gradient method you can refer to this freecodecamp article.

Let's jump into the list: 



background-image: linear-gradient(to bottom right, #FF512F, #DD2476);
Enter fullscreen mode Exit fullscreen mode

color Gradient 1



background-image: linear-gradient(to bottom right, #FF61D2, #FE9090);
Enter fullscreen mode Exit fullscreen mode

Color Gradient 2



background-image: linear-gradient(to bottom right, #72FFB6, #10D164);
Enter fullscreen mode Exit fullscreen mode

Color Gradient 3
4.



background-image: linear-gradient(to bottom right, #FD8451, #FFBD6F);
Enter fullscreen mode Exit fullscreen mode

Color Gradient 4



background-image: linear-gradient(to bottom right, #305170, #6DFC6B);
Enter fullscreen mode Exit fullscreen mode

Color Gradient 5
6.



background-image: linear-gradient(to bottom right, #00C0FF, #4218B8);
Enter fullscreen mode Exit fullscreen mode

Color Gradient 6



background-image: linear-gradient(to bottom right, #009245, #FCEE21);
Enter fullscreen mode Exit fullscreen mode

Color Gradient 7



background-image: linear-gradient(to bottom right, #FDFCFB, #E2D1C3);
Enter fullscreen mode Exit fullscreen mode

Color Gradient 8



background-image: linear-gradient(to bottom right, #0100EC, #FB36F4);
Enter fullscreen mode Exit fullscreen mode

Color Gradient 9



background-image: linear-gradient(to bottom right, #FDABDD, #374A5A);
Enter fullscreen mode Exit fullscreen mode

Color Gradient 10



background-image: linear-gradient(to bottom right, #38A2D7, #561139);
Enter fullscreen mode Exit fullscreen mode

Color Gradient 11



background-image: linear-gradient(to bottom right, #121C84, #8278DA);
Enter fullscreen mode Exit fullscreen mode

Color Gradient 12



background-image: linear-gradient(to bottom right, #5761B2, #1FC5A8);
Enter fullscreen mode Exit fullscreen mode

Colr Gradient 13



background-image: linear-gradient(to bottom right, #FFDB01, #0E197D);
Enter fullscreen mode Exit fullscreen mode

Color Gradient 14



background-image: linear-gradient(to bottom right, #FF3E9D, #0E1F40);
Enter fullscreen mode Exit fullscreen mode

Color Gradient 15

Congratulations!! You have successfully read this long list. I have also tweeted this one, you can bookmark it there for your future reference.

I have gathered this colourful ideas from Pinterest.
I Hope, you have found it useful. Share the article, comment which one you are going to use and comment your feedbacks as well.

Also, I write about web development on twitter, follow me there for understanding web development technologies easily.

Thank you!! See you soon...

Latest comments (32)

Collapse
 
stevebmurphy profile image
Steve Murphy •

They are all amazing. Great work, Ashique!

Collapse
 
devash98 profile image
Ashique Billa Molla •

Thanks Steve!!

Collapse
 
rudrasen2 profile image
Rudra Sen •

I like from 1-9.

Collapse
 
devash98 profile image
Ashique Billa Molla •

That's great!! I am happy that you like them 😊

Collapse
 
madza profile image
Madza •

I like all of them, great you included direct snippets 👍✨💯

Collapse
 
devash98 profile image
Ashique Billa Molla •

Yes, Madza. The provided pictures of code snippets and the Gradients with shadow everything I have designed with CSS HTML. Thank you for your kind words 😊

Collapse
 
arthurdenner profile image
Arthur Denner •

The #8 is 🔥! I just put it on my side project newsletterthemes.com and linked your blog post as a comment in the CSS.

Thanks for sharing!

Collapse
 
devash98 profile image
Ashique Billa Molla •

Thanks for the appreciation!!

Collapse
 
olawalemumeen2 profile image
OLAWALE MUMEEN •

Its awesome

Collapse
 
devash98 profile image
Ashique Billa Molla •

Thanks Mumin!!

Collapse
 
andrewbaisden profile image
Andrew Baisden •

Stunning 🤩

Collapse
 
devash98 profile image
Ashique Billa Molla •

Thanks!!

Collapse
 
suchintan profile image
SUCHINTAN DAS • • Edited

Very well written Ashique, Number 3, 7, 9 and 12 are my personal favorite. Can't wait to use this on my upcoming projects.

Thanks for the post 🙂

Collapse
 
devash98 profile image
Ashique Billa Molla •

Glad that you liked it, Suchintan.

Collapse
 
joset98 profile image
joset98 •

great gradients combination dude, i like it. i am asking if would you have a light blue gradient too ?

Collapse
 
anuragvohraec profile image
Anurag Vohra •

wo great colors

Collapse
 
devash98 profile image
Ashique Billa Molla •

Thanks, brother!!

View full discussion (32 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.