What it is: normal CSS variables are just text, so the browser cannot animate them. With @property you tell the browser what type of value the variable holds, like a color, an angle or a number, and then it can transition or animate it smoothly.

Declare a typed variable

css">@property --lotgrafix-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

Rotating gradient border

.lotgrafix-border {
    padding: 4px;
    border-radius: 12px;
    background: conic-gradient( from var( --lotgrafix-angle ), orangered, gold, orangered );
    animation: lotgrafix-rotate 4s linear infinite;
}

@keyframes lotgrafix-rotate {
    to {
        --lotgrafix-angle: 360deg;
    }
}

Smooth gradient transition on hover

Gradients cannot be transitioned normally. Animating a typed color variable works around it.

@property --lotgrafix-color {
    syntax: "<color>";
    initial-value: orangered;
    inherits: false;
}

.lotgrafix-button {
    background: linear-gradient( 90deg, var( --lotgrafix-color ), black );
    transition: --lotgrafix-color 0.4s ease;
}

.lotgrafix-button:hover {
    --lotgrafix-color: gold;
}

The three descriptors

• syntax: the type of value, for example "<color>", "<length>", "<number>", "<percentage>" or "<angle>".
• initial-value: the default value. It is required unless the syntax is "*".
• inherits: true or false, whether child elements receive the value.

Support note

@property works in all modern browsers. In an older browser the variable is still usable but it will not animate smoothly.