CSS Houdini experimental showcase by @iamvdo
background-opacity
, background-rotate
, background-filter
Support: Chrome/Opera/Edge (Sometimes, image won’t load)
background-transform
should have been a better idea but it seems that no browsers support <transform-list>
value right now (when registering a new custom properties). So it's easier to play with background-rotate
--background-filter
.el {
background: url(...);
}
.el.is-loaded {
background: paint(background);
--background-opacity: 1;
--background-rotate: 0deg;
--background-filter: hue-rotate(var(--hue-rotate)) grayscale(var(--grayscale)) blur(var(--blur));
--blur: 0px;
--grayscale: 0%;
--hue-rotate: 320deg;
}