CSS Gradient Examples

In CSS, we can add a solid color to the background using background color. Similarly, we can add a gradient to the background using the background-image property. Also, not only just background, we can add gradients to borders, icons, buttons, text and many more. CSS gradient provides us with better control and output than image. So this blog will cover some exciting CSS gradient examples that you will be going to love.

Before looking at the examples, let’s first discuss what CSS gradient is.

CSS Gradient

Gradients mean one color that fades into another and generates a new color shade. While CSS gradient let you control every aspect of the process, from the direction and shape to the color of the gradient. It enables you to generate smooth transitions between two and more solid colors.

There are three types of CSS Gradients:

1. Linear gradient
2. Radial gradient
3. Conic gradient

Also we can also create repeating gradients using the three repeating functions: 1. repeating-linear-gradient(), 2. repeating-radial-gradient() and 3. repeating-conic-gradient().   

I. Linear Gradient

The linear gradient is created using the linear-gradient() function. The linear-gradient() creates a gradient image consists of a transition along a straight line between two and more colors.

Syntax:

linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [to left | to right] || [to top | to bottom]

II. Radial Gradient

We can create radial gradient using the radial-gradient() function. The radial-gradient() creates a gradient image consists of a transition radiate from an origin between two and more colors. The transition shape can be an ellipse or a circle.

Syntax:

radial-gradient(
  [ <ending-shape> || <size> ]? [ at <position> ]? ,
  <color-stop-list>
);

III. Conic Gradient

The conic gradient is created using the conic-gradient() function. The conic-gradient() creates a gradient image consists of a transition rotate around the center point between two and more colors. 

Syntax:

conic-gradient(
  [ from <angle> ]? [ at <position> ]?,
  <angular-color-stop-list>
)

Now let’s move to the ready to use, click to copy CSS gradient examples.

CSS Gradient Examples:

1. CSS gradient example 1:

background-image: linear-gradient(to right, #fffbd5, #b20a2c);

2. CSS gradient example 2:

background-image: linear-gradient(to right, #8360c3, #2ebf91);

3. CSS gradient example 3:

background-image: radial-gradient( circle 759px at -6.7% 50%, rgba(80,131,73,1) 0%, rgba(140,209,131,1) 26.2%, rgba(178,231,170,1) 50.6%, rgba(144,213,135,1) 74.1%, rgba(75,118,69,1) 100.3% );

4. CSS gradient example 4:

background-image: linear-gradient(to right, #ff6e7f, #bfe9ff);

5. CSS gradient example 5:

background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);

6. CSS gradient example 6:

background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);

7. CSS gradient example 7:

background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);

8. CSS gradient example 8:

background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);

9. CSS gradient example 9:

background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);

10. CSS gradient example 10:

background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);

11. CSS gradient example 11:

background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);

12. CSS gradient example 12:

background-image: linear-gradient(to top, #6a85b6 0%, #bac8e0 100%);

13. CSS gradient example 13:

background-image: linear-gradient(to top, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%)

14. CSS gradient example 14:

background-image: linear-gradient(-225deg, #77FFD2 0%, #6297DB 48%, #1EECFF 100%);

15. CSS gradient example 15:

background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);

16. CSS gradient example 16:

background-image: linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%);

17. CSS gradient example 17:

background-image: linear-gradient(to right, #d7d2cc 0%, #304352 100%);

18. CSS gradient example 18:

background-image: linear-gradient(to top, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%);

19. CSS gradient example 19:

background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);

20. CSS gradient example 20:

background-image: linear-gradient(to right, #434343 0%, black 100%);

21. CSS gradient example 21:

background-image: linear-gradient(to top, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%);

22. CSS gradient example 22:

background-image: linear-gradient(to top, #dbdcd7 0%, #dddcd7 24%, #e2c9cc 30%, #e7627d 46%, #b8235a 59%, #801357 71%, #3d1635 84%, #1c1a27 100%);

23. CSS gradient example 23:

background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);

24. CSS gradient example 24:

background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);

25. CSS gradient example 25:

background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%);

Conclusion

Hopefully, you understood what CSS gradient is and loved all the CSS gradient examples. So now it’s your turn. List out all the gradient styles you use in the comment section below.

Happy Coding!