Free online CSS @property generator. Generate custom property registration code and animation keyframes instantly. Enable smooth transitions for gradients, colors and other CSS values that were previously un-animatable. Pure frontend.
The CSS @property Generator is a free online tool that helps frontend developers quickly generate CSS custom property registration code and animation keyframes. By registering custom properties with @property, you can animate CSS value types that were previously impossible to transition, like gradient angles. Pure frontend, no uploads.
Register --gradient-angle as <angle> to create smooth rotating gradient backgrounds without JavaScript.
Register color properties as <color> type for smooth theme color transitions.
Register length/percentage properties for more flexible responsive transitions.
CSS Houdini is a set of W3C APIs that let developers extend CSS capabilities. @property belongs to the CSS Properties and Values API, the most widely supported Houdini feature. It solves the fundamental problem of CSS custom properties not being animatable. Combined with CSS animations, @property enables advanced effects that previously required JavaScript, with better performance and cleaner code.
@property is part of CSS Houdini that allows developers to register custom CSS properties with defined syntax types, initial values, and inheritance behavior. Registered properties can be animated and transitioned by CSS.
Regular CSS custom properties (var) cannot be animated because browsers don't know their value types. By registering with @property, browsers understand the data type and can apply animations and transitions.
Supports <length>, <number>, <percentage>, <length-percentage>, <color>, <image>, <url>, <integer>, <angle>, <time>, <resolution>, <transform-function>, <custom-ident>, and more.
Chrome 85+, Edge 85+, Safari 15.4+ support @property. Firefox is implementing it. Use @supports detection or provide fallbacks.
Yes. Each @property rule registers one custom property. You can register any number of custom properties in your stylesheet.
The inherits property controls whether the custom property inherits from parent elements. Set to true for inheritance, false to use the initial value.