CSS3 Linear Gradients


SUBMITTED BY: Tusohian

DATE: Sept. 18, 2016, 4:51 p.m.

FORMAT: Text only

SIZE: 902 Bytes

HITS: 491

  1. Linear Gradient - Top to Bottom (this is default)
  2. #grad {
  3. background: red; /* For browsers that do not support gradients */
  4. background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
  5. background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
  6. background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
  7. background: linear-gradient(red, yellow); /* Standard syntax */
  8. }
  9. Linear Gradient - Left to Right
  10. #grad {
  11. background: red; /* For browsers that do not support gradients */
  12. background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
  13. background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
  14. background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
  15. background: linear-gradient(to right, red , yellow); /* Standard syntax */
  16. }

comments powered by Disqus