使用渐变应用 CSS hue-rotate() 滤镜

Question

是否可以根据梯度应用其参数值的 CSS 过滤器？例如，我想在我的网页的右上角应用 +15° 的色调旋转，在左下角应用 -15°，它们之间有一个平滑的颜色渐变（中间的任何点都应该像它一样应用了 hue-rotate(some number between -15 and +15)。

我知道可以很容易地生成渐变作为背景，但我想要滤镜本身的渐变。

Answer 1

使用 HSL 颜色。

background-image: linear-gradient(0deg, hsl(0, 100%, 50%) 0%, hsl(30, 100%, 50%) 100%);

Answer 2

您可以使用两个图层和蒙版来近似此：

html {
  min-height:100%;
  position:relative;
}
html::before,
html::after {
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:red;
}
html::before {
  filter:hue-rotate(100deg);
  -webkit-mask:linear-gradient(to bottom right,#fff,transparent);
}
html::after {
  filter:hue-rotate(-100deg);
  -webkit-mask:linear-gradient(to top left,#fff,transparent);
}

这也可以用图片来完成：

html {
  min-height:100%;
  position:relative;
}
html::before,
html::after {
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:url(https://i.picsum.photos/id/1074/800/800.jpg) center/cover;
}
html::before {
  filter:hue-rotate(150deg);
  -webkit-mask:linear-gradient(to bottom right,#fff,transparent);
}
html::after {
  filter:hue-rotate(-150deg);
  -webkit-mask:linear-gradient(to top left,#fff,transparent);
}

使用渐变应用 CSS hue-rotate() 滤镜

Apply CSS hue-rotate() filter with a gradient

css

gradient

css-filters