CSS Implementation of Gradient Color, Left to Right, Top to Bottom

Publish: 2017-12-28 | Modify: 2018-08-27

  1. Gradient color from left to right:
background:#74F195;
background:-webkit-linear-gradient(left,#74F195,#C8FF9A);
background:-o-linear-gradient(right,#74F195,#C8FF9A);
background:-moz-linear-gradient(right,#74F195,#C8FF9A);
background:linear-gradient(to right,#74F195,#C8FF9A);

Image

  1. Gradient color from top to bottom:
background: -moz-linear-gradient(top, #4B8C5C 0%, #75945E 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a09d), color-stop(100%,#008985));
background: -webkit-linear-gradient(top, #00a09d 0%,#008985 100%);
background: -o-linear-gradient(top, #00a09d 0%,#008985 100%);
background: -ms-linear-gradient(top, #00a09d 0%,#008985 100%);

Image

Original article from: css实现渐变色，从做到右，从上到下, all rights reserved to the original author. Please contact QQ:337003006 for any infringement issues.

Comments
xiaoz

I come from China and I am a freelancer. I specialize in Linux operations, PHP, Golang, and front-end development. I have developed open-source projects such as Zdir, ImgURL, CCAA, and OneNav.

Random article