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:

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

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

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

4.

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

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

6.

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

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

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

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

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

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

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

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

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

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

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

Comments

[dnasedkina]

13 is my favorite! Good job

[Akora Solomon]

I got with 13. Too

[Ashique Billa Molla]

That's good to know. Thanks!!

[Muhammed]

They are all Great I don't Even know which One to Choose 😂 let's Choose all

[Ashique Billa Molla]

Thanks, man!!

[Sojin Samuel]

Bravo ashique, are you a student or working currently

[Ashique Billa Molla]

I am a FTE.

[Sojin Samuel]

Googled FTE, but i dont understand what is it

[Ashique Billa Molla]

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

[Sam Zhang]

Thanks for sharing!

[Ashique Billa Molla]

Welcome 🤗, Sam!!

[Madza]

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

[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 😊

[🚩 Atul Prajapati 🇮🇳]

Bookmarked for future reference, thanks for sharing 😊🌻

[Ashique Billa Molla]

You are welcome, Atul.🤗

[SUCHINTAN DAS]

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 🙂

[Ashique Billa Molla]

Glad that you liked it, Suchintan.

[Steve Murphy]

They are all amazing. Great work, Ashique!

[Ashique Billa Molla]

Thanks Steve!!

[OLAWALE MUMEEN]

Its awesome

[Ashique Billa Molla]

Thanks Mumin!!

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

[Ashique Billa Molla]

Thanks for the appreciation!!