CODEWITHSUNDEEP
cssgradientcss-filters
Seldi
Seldi

Reputation: 67

Apply CSS hue-rotate() filter with a gradient

Is it possible to apply a CSS filter with its parameter values depending on a gradient? For example I would like to apply a +15° hue rotation to the top-right corner of my web page and -15° to the bottom-left corner, with a smooth color gradient between them (any point in between should be like it was applied a hue-rotate(some number between -15 and +15) on).

I know gradients can easily be generated as a background but I want a gradient on the filter itself.

Upvotes: 0

Views: 1639

Answers (2)

Temani Afif
Temani Afif

Reputation: 272901

You can aproximate this using two layers and mask:

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

This can also be done with an image:

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

Upvotes: 1

Gabriel
Gabriel

Reputation: 2190

Use HSL color.

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

Upvotes: 1

Related Questions