Gradients help display smooth transitions between two or more colors. Linear gradients in particular allow transitions between the colors passed to them in single direction.

What is a gradient?

Basically a gradient is a color transition we can control to create different visuals and effects. There are two types of gradients we can use in CSS, linear and radial, but this article will specifically focus on linear gradients.

Here's a visual example of a linear gradient in action, and the corresponding code.

CSS

.gradient {
  width: 200px;
  height: 200px;
  background-image: linear-gradient(salmon, #ffa95a);
}

HTML

<div class="gradient"></div>

Linear Gradient Basics

What is a gradient?