Registered custom properties

See it working

The syntax

@property --angle {
  syntax: '<angle>'; inherits: false; initial-value: 0deg;
}
.ring { background: conic-gradient(from var(--angle), …);
        transition: --angle .8s; }

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable @property --dm-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; } .dm-prop { display: grid; place-items: center; min-height: 150px; } .dm-prop-ring { --dm-angle: 0deg; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #0a0a0f; background: radial-gradient(#fff 58%, transparent 59%), conic-gradient(from var(--dm-angle), #4f46e5, #0ea5e9, #f05a28, #4f46e5); transition: --dm-angle .9s ease; cursor: pointer; } .dm-prop-ring:hover { --dm-angle: 300deg; }

ResetCopy

For browsers without it

Without @property the variable is just a string, so the gradient snaps to its new angle on hover instead of sweeping. Same end state, no motion.