Ashique Billa Molla
Posted on Jun 12, 2022
199 43
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:
1.
background-image: linear-gradient(to bottom right, #FF512F, #DD2476);
1.
background-image: linear-gradient(to bottom right, #FF61D2, #FE9090);
1.
background-image: linear-gradient(to bottom right, #72FFB6, #10D164);
4.
background-image: linear-gradient(to bottom right, #FD8451, #FFBD6F);
1.
background-image: linear-gradient(to bottom right, #305170, #6DFC6B);
6.
background-image: linear-gradient(to bottom right, #00C0FF, #4218B8);
1.
background-image: linear-gradient(to bottom right, #009245, #FCEE21);
1.
background-image: linear-gradient(to bottom right, #FDFCFB, #E2D1C3);
1.
background-image: linear-gradient(to bottom right, #0100EC, #FB36F4);
1.
background-image: linear-gradient(to bottom right, #FDABDD, #374A5A);
1.
background-image: linear-gradient(to bottom right, #38A2D7, #561139);
1.
background-image: linear-gradient(to bottom right, #121C84, #8278DA);
1.
background-image: linear-gradient(to bottom right, #5761B2, #1FC5A8);
1.
background-image: linear-gradient(to bottom right, #FFDB01, #0E197D);
1.
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...
Stellar Development Foundation PROMOTED
Check out Episode 1: How a Hackathon Project
Became a Web3 Startup 🚀
Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev
Diaries series we follow the journey of a team of developers building on the Stellar
Read More
Top comments (32)
dnasedkina • Jun 12 '22
13 is my favorite! Good job
Akora Solomon • Jun 13 '22
I got with 13. Too
Ashique Billa Molla • Jun 12 '22
That's good to know. Thanks!!
Muhammed • Jun 12 '22
They are all Great I don't Even know which One to Choose 😂 let's Choose all
Ashique Billa Molla • Jun 12 '22
Thanks, man!!
Sojin Samuel • Jun 12 '22
Bravo ashique, are you a student or working currently
Ashique Billa Molla • Jun 12 '22
I am a FTE.
Sojin Samuel • Jun 13 '22
Googled FTE, but i dont understand what is it
Ashique Billa Molla • Jun 13 '22
I shouldn't have used the abbreviation. It means Full Time Employee.
🚩 Atul Prajapati 🇮🇳 • Jun 12 '22
Bookmarked for future reference, thanks for sharing 😊🌻
Ashique Billa Molla • Jun 12 '22
You are welcome, Atul.🤗
Sam Zhang • Jun 12 '22
Thanks for sharing!
Ashique Billa Molla • Jun 12 '22
Welcome 🤗, Sam!!
Madza • Jun 16 '22
I like all of them, great you included direct snippets 👍✨💯
Ashique Billa Molla • Jun 16 '22
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 😊
SUCHINTAN DAS • Jun 14 '22 • 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 🙂
Ashique Billa Molla • Jun 14 '22
Glad that you liked it, Suchintan.
Steve Murphy • Jun 16 '22
They are all amazing. Great work, Ashique!
Ashique Billa Molla • Jun 16 '22
Thanks Steve!!
Anurag Vohra • Jun 13 '22
wo great colors
Ashique Billa Molla • Jun 13 '22
Thanks, brother!!
OLAWALE MUMEEN • Jun 15 '22
Its awesome
Ashique Billa Molla • Jun 15 '22
Thanks Mumin!!
View full discussion (32 comments)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.
Code of Conduct • Report abuse
JetBrains PROMOTED
Build Secure, Ship Fast
Discover best practices to secure CI/CD without slowing down your pipeline.
Read more
Ashique Billa Molla
I share what I am learning. Follow me on twitter [Link]
LOCATION
Kolkata, India
EDUCATION
Jadavpur University
WORK
Web Developer
JOINED
Sep 7, 2021
More from Ashique Billa Molla
Basic Popular Use Cases of Git
#git #github #azuredevops #webdev
10 Cool Rest APIs for Your Next Projects
#webdev #api #react #opensource
JetBrains PROMOTED
Build Secure, Ship Fast
Discover best practices to secure CI/CD without slowing down your pipeline.
Read more