15 Beautiful Color Gradients using CSS
Tags: css, webdev, webdesign
Published: 2022-06-12 07:42:34

👋, 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](https://www.freecodecamp.org/news/css-linear-gradient-explained-with-examples/amp/) article.

Let's jump into the list: 
1. 

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

![color Gradient 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6w0eat86enen7ifje129.PNG)
2. 

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

![Color Gradient 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5jomswng7ecyp404vfr.PNG)

3. 

```
background-image: linear-gradient(to bottom right, #72FFB6, #10D164);
```
![Color Gradient 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ljiyy4itzx3o4loop9b.PNG)
4.

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

![Color Gradient 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lw24f3w7momcprviwyz3.PNG)
5. 

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

![Color Gradient 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0n9yttqon5vm86zuxkv.PNG)
6.

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

![Color Gradient 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xxf37dkwn1cbhsjm0g7.PNG)
7.  

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

![Color Gradient 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tji2r7awz90joowxi2e1.PNG)
8.  

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

![Color Gradient 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttjeggqnfe22ujbs80qw.PNG)
9. 

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

![Color Gradient 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmg1abva11xh9zym2lrc.PNG)
10. 

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

![Color Gradient 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uu37e1xhbkjqf53joeh9.PNG)
11. 

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

![Color Gradient 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sipb56zggbmjju6dg0y3.PNG)
12. 

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

![Color Gradient 12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6ek4gnyiyeonxbh139e.PNG)
13. 

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

![Colr Gradient 13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7plzbwro42p84yqdygw.PNG)
14. 

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

![Color Gradient 14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/by05kg5p28e03t85pewf.PNG)
15. 

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

![Color Gradient 15](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gwfha8thmmyorarudcty.PNG)

Congratulations!! You have successfully read this long list. I have also [tweeted](urlhttps://twitter.com/dev_ash_twiter/status/1535679139331526656?t=AvXxaaHZ4nlMzg-1UFKOLw&s=19) 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](https://twitter.com/dev_ash_twiter?t=X3br-RDeGhPGTTOUWgnNGg&s=09), [follow](https://twitter.com/dev_ash_twiter?t=X3br-RDeGhPGTTOUWgnNGg&s=09) me there for understanding web development technologies easily.

Thank you!! See you soon...