html:

<div class="hh"></div>

css:

.hh{

width: 500px;

height: 500px;

background: #127feb;

/* Old browsers */

background: -moz-linear-gradient(-45deg, #66cdcc 0%, #66cdcc 100%);

/* FF3.6+ */

background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #66cdcc), color-stop(100%, #127feb));

/* Chrome,Safari4+ */

background: -webkit-linear-gradient(-45deg, #66cdcc 0%, #127feb 100%);

/* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(-45deg, #66cdcc 0%, #127feb 100%);

/* Opera 11.10+ */

background: -ms-linear-gradient(-45deg, #66cdcc 0%, #127feb 100%);

/* IE10+ */

background: linear-gradient(-45deg, #66cdcc 0%, #127feb 100%);

/* W3C */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66cdcc, endColorstr=#127feb, GradientType=1);

/* IE6-9 fallback on horizontal gradient */ }

作者：花花0825
链接：https://www.jianshu.com/p/052b1fa13356