`@property`: typed and animatable custom properties

Learn how to register CSS variables with `@property` so the browser understands their real type and can animate them reliably in gradients, progress bars, angles and dynamic themes.

How much do you know about CSS?

📘 Theory

What changes when you register a variable

It is not just another way to declare tokens. It is a way to make them understandable to the rendering engine.

Without registration, values such as `0deg` and `360deg` live inside a string. The browser cannot always build a smooth transition between them.

With `@property`, the variable has a real type. That means the browser can validate and interpolate it more like a native CSS property.

`syntax`: defines the expected type, such as `` or ``.
`inherits`: decides whether the value should travel through inheritance.
`initial-value`: prevents ambiguous states when the variable has not been explicitly set yet.

Minimum viable registration

The most useful way to learn it is with a case you can animate immediately.

Patterns where it really shines

You do not need it for every token in the system, only for the ones that benefit from typing or interpolation.

Gradients and angles

With `` you can rotate conic gradients or directional effects without rewriting the full declaration.

Progress and metrics

With ``, progress bars, radial charts and partial fills become much easier to animate declaratively.

Dynamic themes

With `` or ``, you can create richer variations around hue, intensity or contrast.

When not to overuse it

Registering variables does not replace design judgment.

If a variable only exists to reuse a static value, a normal custom property is usually enough.

Reserve `@property` for cases that gain something real from typing or animation. That keeps the code clear and preserves the concept for the places where it matters.

1 What changes when you register a variable 2 Minimum viable registration 3 Patterns where it really shines 4 When not to overuse it

🧪 Learn by doing

Example Interactive demo: three registered types Explore how `@property` unlocks hue changes, angular rotation and a progress bar without relying on JavaScript.

⌄

🏁 Challenges

Challenge Challenge: register a progress bar Turn `--progress` into a percentage variable and use it to animate the fill.

⌄

🧰 Resources

Useful links

MDN - @property MDN - Using CSS custom properties

Test

Check your knowledge with a test about CSS.

Test for CSS

Course resources 78

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 47

CSS animations: transitions, keyframes and micro-interactions

Lesson 49

`interpolate-size`: animate `height: auto` without hacks

›