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

πŸ‘‹, 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:
1.

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

color Gradient 1
2.

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

Color Gradient 2

3.

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
5.

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
7.

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

Color Gradient 7
8.

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

Color Gradient 8
9.

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

Color Gradient 9
10.

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

Color Gradient 10
11.

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

Color Gradient 11
12.

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

Color Gradient 12
13.

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

Colr Gradient 13
14.

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

Color Gradient 14
15.

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...

Discussion (32)

Collapse
dnasedkina profile image
dnasedkina

13 is my favorite! Good job

Collapse
akorasolomon profile image
Akora Solomon

I got with 13. Too

Collapse
devash98 profile image
Ashique Billa Molla Author

That's good to know. Thanks!!

Collapse
muhamme43650276 profile image
Muhammed

They are all Great I don't Even know which One to Choose πŸ˜‚ let's Choose all

Collapse
devash98 profile image
Ashique Billa Molla Author

Thanks, man!!

Collapse
madza profile image
Madza

I like all of them, great you included direct snippets πŸ‘βœ¨πŸ’―

Collapse
devash98 profile image
Ashique Billa Molla Author

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
atulcodex profile image
Atul Prajapati

Bookmarked for future reference, thanks for sharing 😊🌻

Collapse
devash98 profile image
Ashique Billa Molla Author

You are welcome, Atul.πŸ€—

Collapse
samzhangjy profile image
Sam Zhang

Thanks for sharing!

Collapse
devash98 profile image
Ashique Billa Molla Author

Welcome πŸ€—, Sam!!

Collapse
sojinsamuel profile image
Sojin Samuel

Bravo ashique, are you a student or working currently

Collapse
devash98 profile image
Ashique Billa Molla Author

I am a FTE.

Collapse
sojinsamuel profile image
Sojin Samuel

Googled FTE, but i dont understand what is it

Thread Thread
devash98 profile image
Ashique Billa Molla Author

I shouldn't have used the abbreviation. It means Full Time Employee.

Collapse
stevebmurphy profile image
Steve Murphy

They are all amazing. Great work, Ashique!

Collapse
devash98 profile image
Ashique Billa Molla Author

Thanks Steve!!

Collapse
andrewbaisden profile image
Andrew Baisden

Stunning 🀩

Collapse
devash98 profile image
Ashique Billa Molla Author

Thanks!!

Collapse
olawalemumeen2 profile image
OLAWALE MUMEEN

Its awesome

Collapse
devash98 profile image
Ashique Billa Molla Author

Thanks Mumin!!

Collapse
anuragvohraec profile image
Anurag Vohra

wo great colors

Collapse
devash98 profile image
Ashique Billa Molla Author

Thanks, brother!!

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 Author

Thanks for the appreciation!!

Collapse
suchintan profile image
SUCHINTAN DAS • Edited on

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 Author

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
iamdevmarcos profile image
Marcos Andre

Awesome, good content

Collapse
devash98 profile image
Ashique Billa Molla Author

Thanks, Marcos!!

Collapse
rudrasen2 profile image
Rudra Sen

I like from 1-9.

Collapse
devash98 profile image
Ashique Billa Molla Author

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