CSS 模糊渐变

CSS 模糊渐变是一种可以通过 CSS 属性来实现的渐变效果。它可以将两种或多种颜色无缝地混合在一起，并在其之间创建一个平滑的、模糊的过渡。

实现方法

通过 CSS 的 linear-gradient() 函数,我们可以实现模糊渐变。该函数通常用于渐变过渡中定义的两个或多个颜色之间，但也可以用于模糊效果。

语法格式

background-image: linear-gradient(direction, color-stop1, ..., color-stopN);

其中，

• direction： 指定渐变的方向。可以是角度（单位为度）或关键字（to top, to right, to bottom 等）。
• color-stop1 - color-stopN：进行渐变过渡的颜色值。渐变过渡的颜色可以是具体的颜色值（如 #ff00ff），也可以是颜色的名称（如“蓝色”）。

示例代码

.box{
  background-image: linear-gradient(90deg, #820263 0%, #C8005E 100%);
  filter: blur(5px);
}

上述代码中，.box 是要创建模糊渐变效果的元素，background-image 属性定义了渐变过渡的颜色和方向，filter 属性定义了元素的模糊程度。

输出效果

注意事项

• 在使用 linear-gradient() 函数时，必须指定至少两个颜色值，否则出现语法错误。
• 在使用 filter 属性进行模糊处理时，需要使用特定厂商（如 WebKit 和 Moz）的前缀以确保兼容性。例如， -webkit-filter: blur(5px);。

参考资料

1. MDN Web Docs