css实现背景渐变以及模糊

html:

<div>
 </div>

css:

div{
            margin:auto;
            width: 200px;
            height: 200px;
            background-image: linear-gradient(to right , pink, skyblue);
            filter: blur(20px);
        }

首先渐变就有很多种写法了，比如：

向右：background-image: linear-gradient(to right , pink, skyblue);

向左：background-image: linear-gradient(to left, pink, skyblue);

同理向上和向下：background-image: linear-gradient(to top, pink, skyblue);

background-image: linear-gradient(to bottom, pink, skyblue);

以及斜角或者自定角度：background-image: linear-gradient(to bottom right , pink, skyblue);

background-image: linear-gradient(45deg , pink, skyblue);

还可以自己加百分比：

background-image: linear-gradient(to right, pink 20%, skyblue 40%, rgba(255, 255, 0, 0.774) 60%);

想让背景模糊就加一条css：

filter: blur(20px);

最后：

渐变+模糊就完成了