渐变的几个效果图

  //立体感按钮
 .linear-gradient{
             180px;
            height: 50px;
            text-align: center;
            margin-top: 40px;
            line-height: 50px;
            border-radius: 4px;
            background: green;
            color:#fff;
            font-size: 20px;
            background-image: linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));
        }


 <div class="main">
            <div class="item" data-brief="立体感按钮">
                    <div class="linear-gradient">保存</div>
            </div>

立体球体：

  <div class="item" data-brief="球体">
                <div class="radial-gradient"></div>
            </div>


 .radial-gradient{
             180px;
            height: 180px;
            border-radius: 90px;
            background-color: blue;
            background-image: radial-gradient(120px at 50px 50px,rgba(0,0,0,0),rgba(0,0,0,.6));
        }

进度条：

<div class="item" data-brief="动态进度条">
                <div class="linear-gradient-repeat"></div>
</div>



  .linear-gradient-repeat{
            margin-left: 20px;
            margin-top: 60px;
             180px;
            height: 40px;
            background-color: yellow;
            background-image: linear-gradient(
                        135deg,
                        blue 25%,
                        transparent 25%,
                        transparent 50%,
                        blue 50%,
                        blue 75%,
                        transparent 75%,
                        transparent 100%
                         );
            background-size: 40px 40px;
        }