IconVault logoIconVault
Sign in

CSS @property Playground - Interactive CSS Lab | IconVault

Learn CSS @property with live demos: animate gradient angles, progress values and hues. Build and register your own typed custom property.

All tools

CSS @property Playground

Typed custom properties with animation demos

5 of 5 free uses left
@property not detected hereBaseline widely available (Chrome 85+, Safari 16.4+, Firefox 128+). Without registration the demos below jump instead of animating, that is the whole point.

Animated gradient angle

conic-gradient(from var(--iv-angle), …) with transition on --iv-angle. Registered as <angle>, the browser interpolates degrees. Unregistered, it flips from 0 to 360 instantly.

Progress number

A bar whose width is calc(var(--iv-p) * 1%). Registered as <number>, 10 to 92 eases smoothly. Unregistered, custom properties are just token streams and cannot interpolate.

--iv-p drives the width via calc().

Hue shift

hsl(var(--iv-hue) 70% 45%) transitioning --iv-hue from 160 to 320. A registered <number> interpolates; without it you get a hard cut between two colors.

Build your own typed property

5 of 5 free uses left. The demos and typing are unlimited.

@property at-rule
@property --my-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
JS equivalent
CSS.registerProperty({
  name: "--my-angle",
  syntax: "<angle>",
  inherits: false,
  initialValue: "0deg",
});

About this tool

IconVault's CSS @property Playground shows you why typed custom properties matter. Three live demos, an animated gradient angle, a progress value, and a hue shift, each run twice: once with @property registered and once without. The difference is the whole lesson: registered properties interpolate smoothly, unregistered ones jump, because the browser only knows how to transition a value it has a syntax for.

Then build your own: pick a name, a syntax like <angle> or <color>, set inherits and an initial value, and the tool generates the @property at-rule plus the CSS.registerProperty() JavaScript equivalent. Registering on the page works for real where supported. Free, runs fully in your browser, and @property itself is Baseline widely available.

Frequently asked questions

Popular searches

css @propertycss property at-rulecss registerpropertytyped custom properties csscss custom properties animationanimate css variabletransition css variablecss @property tutorialcss @property exampleregisterproperty examplecss @property browser supportcss houdini properties and values apicss properties and values apianimate gradient angle cssconic gradient animationcss @property angle animationcss variable transition not workingwhy wont my css variable animatecss custom property syntaxat-property syntax listcss @property inheritscss @property initial valuecss typed om custom propertieshoudini custom propertiescss @property color transitionanimate css variable colorprogress ring css @propertycss @property number animationcss @property lengthcss @property percentagecss @property integercss @property urlcss @property image@property vs var csscss registerproperty javascriptcss.registerproperty exampletyped css variablescss variable type checkingcss @property fallbackcss @property 2026learn css @propertyinteractive css property playgroundcss @property democss @property generatorcss custom property registrationanimate custom property csscss variable interpolationcss @property mdnbaseline css @propertycss @property caniusecss @property polyfill

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →