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

Top comments (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

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

Thanks, man!!

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

Bookmarked for future reference, thanks for sharing 😊🌻

Collapse
 
devash98 profile image
Ashique Billa Molla

You are welcome, Atul.🤗

Collapse
 
samzhangjy profile image
Sam Zhang

Thanks for sharing!

Collapse
 
devash98 profile image
Ashique Billa Molla

Welcome 🤗, Sam!!

Collapse
 
sojinsamuel profile image
Sojin Samuel

Bravo ashique, are you a student or working currently

Collapse
 
devash98 profile image
Ashique Billa Molla

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

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

Thanks Steve!!

Collapse
 
andrewbaisden profile image
Andrew Baisden

Stunning 🤩

Collapse
 
devash98 profile image
Ashique Billa Molla

Thanks!!

Collapse
 
olawalemumeen2 profile image
OLAWALE MUMEEN

Its awesome

Collapse
 
devash98 profile image
Ashique Billa Molla

Thanks Mumin!!

Collapse
 
anuragvohraec profile image
Anurag Vohra

wo great colors

Collapse
 
devash98 profile image
Ashique Billa Molla

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

Thanks for the appreciation!!

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

Awesome, good content

Collapse
 
devash98 profile image
Ashique Billa Molla

Thanks, Marcos!!

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 😊