Примените фильтр CSS hue-rotate () с градиентом

Question

Можно ли применить фильтр CSS со значениями его параметров в зависимости от градиента? Например, я хотел бы применить поворот оттенка + 15 ° к верхнему правому углу моей веб-страницы и -15 ° к нижнему левому углу с плавным градиентом цвета между ними (любая точка между ними должна быть такой hue-rotate(some number between -15 and +15) *).

Я знаю, что градиенты могут быть легко сгенерированы как фон, но я хочу градиент на самом фильтре.

Answer 1

Вы можете приблизить это, используя два слоя и маску:

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);
}

Answer 2

Использовать цвет HSL.

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