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 #webdev #webdesign

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

Top comments (33)

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
 
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
 
samzhangjy profile image
Sam Zhang •

Thanks for sharing!

Collapse
 
devash98 profile image
Ashique Billa Molla •

Welcome 🤗, Sam!!

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
 
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
 
stevebmurphy profile image
Steve Murphy •

They are all amazing. Great work, Ashique!

Collapse
 
devash98 profile image
Ashique Billa Molla •

Thanks Steve!!

Collapse
 
olawalemumeen2 profile image
OLAWALE MUMEEN •

Its awesome

Collapse
 
devash98 profile image
Ashique Billa Molla •

Thanks Mumin!!

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

View full discussion (33 comments)

Read next

bst53 profile image

JavaScript Higher-Order Functions Made Easy: Learn with a Real-Life Example! 💡

Burhanuddin S. Tinwala -

mike_andreuzza profile image

We have built a new tool to create background and text gradients with Tailwind CSS

Michael Andreuzza -

gladiatorsbattle profile image

Crafting a Futuristic Neon Button with Advanced Animations Gladiators Battle🚀

Gladiators Battle -

adam21 profile image

¿Cómo llamar a Delta Airlines desde Costa Rica?

adam -