Use these background gradient examples as inspiration for your next CSS design.

Background Gradients Using CSS

The CSS gradient displays a smooth transition using two or more specified colors. CSS gradient provides better control and performance over using an actual image file of a gradient that you can create using tools like Adobe Illustrator. Use the background-image CSS property to declare gradients as a background.

There are three types of gradients: linear (created with the linear-gradient() function), radial (created with radial-gradient() function), and conic (created with the conic-gradient() function). You can also create repeating gradients with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions.

MDN Docs defines these functions as:

linear-gradient(): The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the data type, which is a special kind of .

radial-gradient(): The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function’s result is an object of the data type, which is a special kind of .

conic-gradient(): The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the data type, which is a special kind of .

repeating-linear-gradient(): The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It’s similar to gradient/linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. The function’s result is an object of the data type, which is a special kind of .

repeating-radial-gradient(): The repeating-radial-gradient() CSS function creates an image consisting of repeating gradients that radiate from an origin. It’s similar to gradient/radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to gradient/repeating-linear-gradient(). The function’s result is an object of the data type, which is a special kind of .

repeating-conic-gradient(): The repeating-conic-gradient() CSS function creates an image consisting of a repeating gradient (rather than a single gradient) with color transitions rotated around a center point (rather than radiating from the center).

Here’s the official syntax of each type of gradient.

Official Syntax of Linear Gradients

Official Syntax of Radial Gradients

Official Syntax of Conic Gradients

Here are some awesome background gradient examples that can enhance the UI of your website to the next level.

1. Dusty Grass

Use the following CSS to create the above gradient:

2. Sand to Blue

To create the gradient shown above, use the following CSS code:

3. Kye Meh

Use the following CSS code to create the above linear gradient background:

4. Amin

Use the following CSS to create the above gradient:

5. Relaxing Red

With just a single line of CSS code, you can add a beautiful, eye-catching background gradient to your website:

6. Sublime Light

Try using this CSS to create a gradient background. It’s easy to use and will add a touch of style to your site:

7. Megatron

Use the following CSS to create a 3-colored gradient:

8. Blue Raspberry

Use the following CSS to create a simple bluish linear gradient background:

9. Premium Dark

Get the gradient look shown above with this linear gradient CSS code:

10. Crystalline

Use the following CSS to create the above gradient:

11. Lawrencium

Use the following CSS to create the above gradient. You can also use this code to create other gradients with different colors.

12. Ohhappiness

Add a touch of style to your site with this easy-to-use CSS gradient background:

13. The Strain

Looking to add some pizzazz to your website? Try using this CSS to create a gradient background:

14. Yellow Mango

Use the following CSS to create the above radial gradient background:

15. Juicy Grass

Transform your HTML elements in a snap with this CSS code:

16. Pink Fish

Use the following CSS to create the above linear gradient background:

17. Sea Lord

Use the following CSS to create the above gradient:

18. Cherry Blossom

This CSS code will create a cherry-colored gradient. You can also use it to create other gradients with different colors:

19. Fresh Air

To create the gradient shown above, use the following CSS code: