Linear-gradient won't display when using hsl color values

Web Development
1

background-image: linear-gradient(to right, black, gray);
background-image: linear-gradient(to right, #000, #333);

both display fine, but:

background-image: linear-gradient(to right, hsl(0, 1%, 0), hsl(0, 1%, 25%));

won’t display; chrome devtools cites invalid property value. VSC renders sample colors for these hsl values so i know my syntax is right within those.

almost certainly some minor error but there you go

2

I think you are missing a % in the Lightness value for the first hsl.

# You wrote:
background-image: linear-gradient(to right, hsl(0, 1%, 0), hsl(0, 1%, 25%));

# Try changing to:
background-image: linear-gradient(to right, hsl(0, 1%, 0%), hsl(0, 1%, 25%));
3

Thanks, I will try that. Do hsl lightness values of 0 always need ‘%’ or just when used as arguments for functions? VSC rendered the color preview, was that just VSC bring permissive?

Thank you!

4

If you look at the documentation (hsl() - CSS: Cascading Style Sheets | MDN), the syntax for Saturation and Lightness mentions:

A percentage or the keyword none (equivalent to 0% in this case).

The % symbol is necessary for specifying the percentage.
Have a look at the documentation for hsl for more details and examples.

I am not too familiar with Visual Studio Code, but syntax highlighting may make the color previews work even though the syntax is not valid because of the missing symbol. VSC may be smart enough to figure out your intent, but it won’t automatically insert the missing percentage symbol.

5

Thank you very much for your patient and instructive answer.

1 Like