Radial Gradient


CSS3 gradient provides to produce background with multiple colors. Two or more than two color can be combined to produce CSS3 background gradient effect.

Mainly two types of gradients are available in CSS3 background gradient.

  1. Linear gradient
  2. Radial gradient

Examples of both CSS3 gradients are given below



Linear Gradient



css3 background gradient linear


as both colors are set to 50% so there for half of div is taken by one color and other half by another .


Lets make slight modification in the above style

css3 background gradient linear



Radial Gradient

css3 background gradient radial




Useful Links:

css3 gradient at w3schools