CSS Gradients allow us to display the transition between two or more colors.

There are two to do gradient effect

• Linear gradients
• Radial gradients

Linear Gradients

The linear gradients property must have at least two color stops. These color stops are required for the smooth transition from one color to another.

following example of various types of linear gradients you can do,

See the Pen linear gradient by Arpit (@soniarpit) on CodePen.

Radial Gradient

The radial gradient is defined by its center. The gradient effect is circular in appearance. It must have atleast two color stops for having the gradient effect.

following example is various types of radial gradient you can do,

See the Pen radial grad by Arpit (@soniarpit) on CodePen.

Previous: CSS Wildcard Selectors

Next: CSS Pseudo Class