CSS3 Gradient Tutorial and Reference

Published on: December 25, 2014   Last Updated on : January 9, 2018   Posted By : WebDesignReference


CSS3 Gradients: With the use of CSS3 Gradients, we can easily add a gradient effect to an element.

  • Linear Gradient Reference
  • Radial Gradient Reference

CSS3 Linear Gradient Example

Linear Gradient

Example : CSS3 Linear Gradient Property.

.gradient-left-to-right {
width: 200px;
height: 100px;
background: -webkit-linear-gradient(left, red , yellow);
background: -o-linear-gradient(right, red,yellow);
background: -moz-linear-gradient(right, red, yellow);
background: linear-gradient(to right, red , yellow);
}

CSS3 Radial Gradient Example and Reference

 

Example : CSS3 Radial Gradient Property.

.radial-gradient {
width: 200px;
height: 100px;
background: -webkit-radial-gradient(red, green, yellow);
background: -o-radial-gradient(red, green, yellow);
background: -moz-radial-gradient(red, green, yellow);
background: radial-gradient(red, green, yellow);
}

Author: WebDesignReference

I am a Senior Web Designer.

 

Leave a Reply