# CSS: Unrecognized at-rule “@property” > Canonical HTML version: https://rocketvalidator.com/html-validation/css-unrecognized-at-rule-property > Attribution: Rocket Validator (https://rocketvalidator.com) > License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/) The validator doesn't know the `@property` at-rule yet, but it is valid CSS from the CSS Properties and Values API and works in all major browsers, so you don't need to change it. `@property` registers a custom property with a type. The `syntax` descriptor sets the kind of value it accepts, such as `""` or `""`. `inherits` says whether child elements inherit the value, and `initial-value` is the value the property has when nothing sets it. Once the browser knows the type, it can interpolate the property, so a transition or animation on it changes smoothly. To the browser, an unregistered custom property is just a sequence of tokens, and an animation on it jumps from the start value to the end value halfway through. That is why `@property` often shows up next to a rotating gradient, like the one in the examples below. Chrome and Edge have supported `@property` since version 85, Safari since 16.4 and Firefox since 128, which made it Baseline in July 2024. The validator skips the whole block, so it can't tell you when the rule itself is broken. `syntax` and `inherits` are required, and so is `initial-value` unless `syntax` is `"*"`. If one of them is missing, browsers ignore the whole rule and the property behaves like an ordinary custom property. Keep the rule and mute this message. If you want a clean report instead, move the `@property` rules to an external stylesheet: the validator checks the CSS in ` ``` ## Example with the rule in an external stylesheet ```html Rotating gradient ``` The same CSS goes into `gradient.css`, unchanged: ```css @property --angle { syntax: ""; inherits: false; initial-value: 0deg; } .card { background: linear-gradient(var(--angle), #4f46e5, #ec4899); animation: spin 4s linear infinite; } @keyframes spin { to { --angle: 360deg; } } ```