I have a CSS @property that uses <image> syntax - want the option to set it to URLs or gradients.

However, initial-value errors:

Error message from browser dev tools issue log, indicating that the initial-value property is invalid

This results in the rule being ignored.

Here is a sample, note that the syntax: "<color>" property works and falls back to the initial value, while syntax: "<image>" fails:

@property --my-background { syntax: "<image>"; inherits: true; initial-value: oklab(0.91 -0.18 0.22); /* vivid green */ } @property --my-colour { syntax: "<color>"; inherits: true; initial-value: oklab(0.48 0 -0.31); /* vivid blue */ } div { background: var(--my-background); color: var(--my-colour); width: 100vw; height: 100vh; font-size: 10vh; align-content: center; text-align: center; } <div>this should be blue text on a green background</div>

I've tried using RGB colours, image() and url() CSS functions, nothing seems to be a valid initial value for <image>.

How do I correctly declare this CSS @property with the <image> syntax?

Keith's user avatar

A color is not an image. If you want a color to be an image make it a gradient with one color (a gradient is an image)

@property --my-background { syntax: "<image>"; inherits: true; initial-value: conic-gradient(oklab(0.91 -0.18 0.22) 0 0); } @property --my-colour { syntax: "<color>"; inherits: true; initial-value: oklab(0.48 0 -0.31); } div { background: var(--my-background); color: var(--my-colour); font-size: 10vh; padding: 30px; text-align: center; } <div>this should be blue text on a green background</div>

Temani Afif's user avatar

1 Comment

Thanks, I thought colour was a subset of image. I still need to have the option of block colours (without the gradient hack, as they come from themes), but syntax: "<image>|<color>"; seems to allow that.

2026-05-06T13:21:59.84Z+00:00

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.