CSS @property Generator
Create registered CSS custom properties with @property at-rules. Define syntax, initial values, and inheritance for type-safe, animatable CSS variables.
How to Use the CSS @property Generator
1
Enter Property Details
Choose a custom property name (must start with --), select the syntax type from the dropdown, and provide an initial value that matches the chosen syntax.
2
Set Inheritance
Decide whether the property should inherit from parent elements. Colors, lengths, and numbers typically inherit. Background images typically do not.
3
Copy as CSS or JS
Copy the generated @property rule into your stylesheet, or use the JavaScript version for dynamic registration via CSS.registerProperty().
Syntax Descriptor Reference
| Syntax | Description | Example Initial Value |
|---|---|---|
| <color> | Any valid CSS color | #ff6600 |
| <length> | Length with unit (px, rem, em, vw) | 16px |
| <number> | Any numeric value (no unit) | 0.5 |
| <percentage> | Percentage value | 50% |
| <length-percentage> | Length or percentage | 100% |
| <angle> | Angle with unit (deg, rad, turn) | 45deg |
| <time> | Time with unit (s, ms) | 300ms |
| <integer> | Whole number (no decimals) | 1 |
| <image> | CSS image (gradient, url) | linear-gradient(...) |
| * | Any value (no type checking) | any value |
Frequently Asked Questions
CSS @property is a CSS at-rule that lets you register custom properties (CSS variables) with type information. You specify the syntax (like color, length, percentage), an initial value, and whether the property inherits. This enables the browser to treat custom properties like native CSS properties — including type checking, animation, and proper fallback values.
Registered custom properties can be animated with CSS transitions and keyframes, which unregistered ones cannot. The browser also validates values against the declared syntax and provides proper fallback behavior when invalid values are assigned.
The syntax descriptor accepts: length, number, percentage, length-percentage, color, image, url, integer, angle, time, resolution, transform-function, transform-list, and custom-ident. You can also combine with pipes like length-percentage | color.
CSS @property is supported in Chrome 85+, Edge 85+, Opera 71+, and most Chromium-based browsers. Firefox 128+ added support. Safari 15.4+ has experimental support behind a flag. For broader support, pair @property with a fallback.
Regular CSS variables (var() fallback) only provide a fallback value when the variable is not defined. They have no type system and cannot be animated. @property adds syntax validation, inheritance control, and enables smooth transitions and animations on custom properties.
Ad