Gradient

CSS gradients let you display smooth transitions between two or more specified colors.

There are two types of Gradient -

• Linear Gradient
• Radial Gradient

Linear Gradient

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Top to bottom

By default the direction is top to bottom

#grad {
    background: linear-gradient(red, yellow);
}

Left to right

#grad {
  background: linear-gradient(to right, red , yellow);
}

Diagonal

You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.

The following example shows a linear gradient that starts at top left (and goes to bottom right). It starts red, transitioning to yellow:

#grad {
  background: linear-gradient(to bottom right, red, yellow);
}

#grad {
  background: linear-gradient(to top right, red, yellow);
}

#grad {
  background: linear-gradient(to top left, red, yellow);
}

#grad {
  background: linear-gradient(to bottom left, red, yellow);
}

Using Angle

If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).

background: linear-gradient(angle, color-stop1, color-stop2);

#grad {
  background: linear-gradient(64deg, red, yellow);
}

You can also use negative deg like this -

#grad {
  background: linear-gradient(-64deg, red, yellow);
}

Using Multiple Colors

You can use as many color as you want -

#grad {
  background: linear-gradient(red, yellow, green);
}

Repeating a linear-gradient

The repeating-linear-gradient() function is used to repeat linear gradients:

#grad {
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Specifying Color Stops

You can also declare where you want any particular color to "start". Those are called "color-stops". Say you wanted yellow to take up the majority of the space, but red only a little bit in the beginning, you could make the yellow color-stop pretty early:

#grad {
  background-image:linear-gradient(to right, red,yellow 40%);
}

Radial Gradient

A radial gradient is defined by its center. To create a radial gradient you must also define at least two color stops.

background: radial-gradient(shape size at position, start-color, ..., last-color);

#grad {
  background: radial-gradient(red, yellow);
}

The above two example are the same except the last one is ellipse. So if you increase the width, the gradient is graducally become ellipse. To stop this behaviour you can go following approach.

Specifying Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

#grad {
  background: radial-gradient(circle, red, yellow, green);
}

#grad {
  background: radial-gradient(ellipse, red, yellow, green);
}

Specifying Color Stops

The following example shows a radial gradient with differently spaced color stops:

#grad {
  background: radial-gradient(red 5%, yellow 15%, green 60%);
}

Repeating a radial-gradient

The repeating-radial-gradient() function is used to repeat radial gradients:

#grad {
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:

• closest-side ensures that the entire graient will be visible within the element.
• farthest-side
• closest-corner
• farthest-corner

#grad1 {
  background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

You can also use gradient shape, but must remember that you should not give any comma after the shape value.

#grad1 {
  background: radial-gradient(circle closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
  background: radial-gradient(circle farthest-side at 60% 55%, red, yellow, black);
}

#grad1 {
  background: radial-gradient(circle closest-corner at 60% 55%, red, yellow, black);
}
#grad2 {
  background: radial-gradient(circle farthest-corner at 60% 55%, red, yellow, black);
}

Starting from Another position

A radial gradient doesn't have to start at the default center either, you can specify a certain point by using "at ______" as part of the first parameter, like:

#grad2 {
   background: radial-gradient( circle at top right, yellow, #f06d06 50%);
}