CSS渐变背景阴影

时间:2018-10-09 05:15:29

标签: css gradient

我需要使css渐变看起来像这样,我已经尝试了许多在线制造商,但没有设法使其完全像这样?

enter image description here

2 个答案:

答案 0 :(得分:1)

您可以使用gradient-generator

的帮助

body{
        background: rgba(204,242,191,1);
        background: -moz-linear-gradient(top, rgba(204,242,191,1) 0%, rgba(74,179,32,1) 50%, rgba(172,214,101,1) 51%, rgba(211,255,140,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(204,242,191,1)), color-stop(50%, rgba(74,179,32,1)), color-stop(51%, rgba(172,214,101,1)), color-stop(100%, rgba(211,255,140,1)));
        background: -webkit-linear-gradient(top, rgba(204,242,191,1) 0%, rgba(74,179,32,1) 50%, rgba(172,214,101,1) 51%, rgba(211,255,140,1) 100%);
        background: -o-linear-gradient(top, rgba(204,242,191,1) 0%, rgba(74,179,32,1) 50%, rgba(172,214,101,1) 51%, rgba(211,255,140,1) 100%);
        background: -ms-linear-gradient(top, rgba(204,242,191,1) 0%, rgba(74,179,32,1) 50%, rgba(172,214,101,1) 51%, rgba(211,255,140,1) 100%);
        background: linear-gradient(to bottom, rgba(204,242,191,1) 0%, rgba(74,179,32,1) 50%, rgba(172,214,101,1) 51%, rgba(211,255,140,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccf2bf', endColorstr='#d3ff8c', GradientType=0 );
                
        margin:0;
        height:100vh;
       
}

答案 1 :(得分:1)

我遵循一个简单易用的网站来快速便捷地生成我的渐变。良好的用户界面,易于使用。

Gradient Generator

祝你好运。