The Times You Need A Custom @property Instead Of A CSS Variable

We generally use a CSS variable as a placeholder for some value we plan to reuse — to avoid repeating the same value and to easily update that value across the board if it needs to be updated.
:root { --mix: color-mix(in srgb, #8A9B0F, #fff 25%);
}div {box-shadow: 0 0 15px 25px var(--mix);
}
We can register custom properties in CSS using @property. The most common example you’ll likely find demonstrates how @property can animate the colors of a gradient, something we’re unable