CSS Houdini: Extending CSS with JavaScript APIs

CSS Houdini is a set of low-level APIs that expose the browser’s CSS rendering engine to JavaScript — letting developers define entirely new CSS properties and paint logic the browser doesn’t natively support.

// Register a custom property with a real type and animation support
CSS.registerProperty({
    name: '--gradient-angle',
    syntax: '<angle>',
    inherits: false,
    initialValue: '0deg'
});

.animated-border {
    --gradient-angle: 0deg;
    background: conic-gradient(from var(--gradient-angle), red, blue, red);
    transition: --gradient-angle 2s; /* animatable because it's now a REGISTERED, typed property */
}
.animated-border:hover {
    --gradient-angle: 360deg;
}

Before Houdini, browsers treated custom properties as opaque strings — they couldn’t be smoothly animated because the browser had no idea whether the value was a color, a number, or an angle. registerProperty gives the browser that type information, unlocking genuine animation on properties that were previously stuck jumping instantly between values.