CSS — Part-6

Gradients

• lets you display smooth transitions between two or more specified colors.

There are three types of gradients:

• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)
• Conic Gradients (rotated around a center point)

CSS Linear Gradients

• You must define at least two color stops
• You can also set a starting point and a direction (or an angle) along with the gradient effect.

Syntax

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

Examples

1. Direction — Top to Bottom (this is default)

#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow);
}
//html
<div id="grad1"></div>

2. Direction — Left to Right

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

3. Direction — Diagonal