CSS Gradients

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

Support CodeSnail

If you appreciate my work, or if it has helped you along your journey. It would mean a lot to me if you could write a message on my wall and share a cup of coffee (or tea) with me.

Buy Me A Coffee
Your subscription could not be saved. Please try again.
Your subscription has been successful.


Subscribe to our newsletter and stay updated.

Leave a Comment