css渐变背景，linear-gradient()线性渐变和radial-gradient()径向渐变

1.简单的线性渐变

.layout{
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(#FFE8E9,rgba(0,0,0,0) 200px);
}

 

2.层叠多层的渐变（左右+上下+背景图）

.layout{
    width: 100%;
    min-height: 100vh;
    background:
    url(/static/bg.png) no-repeat 80% 50px,
    linear-gradient(to bottom, transparent -100px,#fff 300px),
    linear-gradient(to right, #D2EEF9,#FFD1DE);
}

 

3.多重径向渐变，（线性渐变+径向渐变的组合）

.layout{
    width: 100%;
    min-height: 100vh;
    background: 
    linear-gradient(to bottom,transparent,#fff 400px),
    radial-gradient(90% 300px at left top, #95E0DC, transparent),
    radial-gradient(60% 300px at right top, #D3CBFC, transparent);
}

4.更加复杂的混合型渐变背景

.layout{
    width: 100%;
    height: 100vh;
    background: 
    linear-gradient(to bottom, transparent, #fff 260px),
    radial-gradient(20% 150px at 70% 230px, rgba(0,210,255,0.2),transparent),
    radial-gradient(40% 180px at 80% 50px, rgba(249,167,176,0.3),transparent),
    radial-gradient(50% 300px at 90% 100px, rgba(212,230,241,0.8),transparent),            
    radial-gradient(20% 150px at 0px 0px, rgba(162,213,239,0.5),transparent),
    radial-gradient(30% 200px at 100px 50px, rgba(249,167,176,0.5),transparent),
    #FFF0F5;
}