Skip to content
CSS·Advanced·Coding·1 min read

Can a custom property hold something other than a plain color or length, like a whole gradient or a comma-separated list?

Short interview answer

Yes — a custom property can hold almost any token sequence, since it isn't type-checked until it's substituted into a property that expects a specific value type. This is powerful, but means an invalid substitution only fails where var() is actually used, not where the custom property was declared.

Example

CSS
:root { --stripe: repeating-linear-gradient(45deg, #0001 0 10px, #0000 10px 20px); }.bg { background-image: var(--stripe); }

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to Custom properties and theming

Related questions