search

microsoft / vscode-css

CSS Textmate grammar for syntax highlighting
Other
17 stars 15 forks source link

Color function updates #4

Closed argyleink closed 1 year ago

argyleink commented 1 year ago
andreamah commented 1 year ago

Do you have an example of hue and in in gradients? I wasn't able to find examples of them with a quick search.

romainmenke commented 1 year ago

https://www.w3.org/TR/css-images-4/#linear-gradients

.foo {
    background-image: linear-gradient(in oklch shorter hue 90deg, red 25% 50%, blue 70% 75%);
    background-image: linear-gradient(in oklab 90deg, red 25% 50%, blue 70% 75%);
    background-image: linear-gradient(in hsl longer hue 90deg, red 25% 50%, blue 70% 75%);
    background-image: linear-gradient(90deg in oklab, red 25% 50%, blue 70% 75%);
}

On MDN these are Hue interpolation method and Interpolation color space in the compat tables : https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

Docs and syntax haven't been updated yet.

argyleink commented 1 year ago

this web tool will help you try out the new syntax 🙂 https://gradient.style

here's an example that uses in and hue interpolation for a very simple and effective rainbow gradient