Skip to main content

CSS Gradients (Live Playground)

Gradients are an essential design feature in web development, allowing you to create smooth transitions between multiple colors. In this tutorial, you will learn how to create and use CSS gradients, including linear and radial gradients, with sample code and simple explanations.

Linear Gradients​

Linear gradients transition colors along a straight line. The linear-gradient() function is used to define a linear gradient, and you can specify the direction and colors.

Example:

CSS
div {
  background-image: linear-gradient(to right, red, yellow, green);
}
Live Playground, Try it Yourself

Radial Gradients​

Radial gradients transition colors in a circular pattern. The radial-gradient() function is used to define a radial gradient, and you can specify the shape, size, and colors.

Example:

CSS
div {
  background-image: radial-gradient(circle, red, yellow, green);
}
Live Playground, Try it Yourself

Repeating Gradients​

You can create repeating gradients by using the repeating-linear-gradient() and repeating-radial-gradient() functions. These functions automatically repeat the gradient pattern to fill the entire element.

Example:

CSS
div {
  background-image: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
}
Live Playground, Try it Yourself

Conclusion​

By understanding and using CSS gradients, you can create visually appealing designs and enhance the overall appearance of your web pages. This helps improve the user experience and make your website more engaging and accessible.