CSS color tip!
Need a rainbow gradient? Let <hue-interpolation> do the work.
.vibrant-rainbow {
background: linear-gradient(
to right
in hsl /* vibrant gradient HSL colorspace */
longer hue, /* hue-interpolation set to longer */
red, red /* now red to red goes all the way around */
);
}
When you think you know everything about gradients and then .... 👀👀 It's time for some Spec reading.T. Afif @ CSS Challenges
It means you can also do the following ``` background: linear-gradient(to right in hsl longer hue, red 0 0) ``` And it works! One color declaration to generate a full rainbow gradient 😲
confirmed! codepen.io/argyleink/pen/…Adam Argyle
What am I missing? Is it from a specific version? I just see a red box. 😓 If i put a second color, i see the rainbow correctly, but with both reds it's a plain colored box ☹️Álvaro Montoro
💡 CSS Tip! Create an infinite rainbow gradient animation 🌈 Demo: codepen.io/t_afif/pen/qBy… via @CodePen ✅ One color declaration ✅ A simple animation Powered by the new color interpolations 👇 #CSS
This is also going to solve the old problem of passing through the dead zone (css-tricks.com/the-gray-dead-…) on the axis of the HSL bicone (codepen.io/thebabydino/fu…).Ana Tudor 🐯🖤🌻
