■ Zone 6 Houdini APIs

CSS
Houdini

Extend the browser's rendering engine.

Checking Paint API support…

Act II

What is CSS Houdini?

Houdini is a collection of low-level APIs that give developers direct access to the CSS engine — letting you paint custom backgrounds, create typed custom properties, and define layout algorithms that the browser natively executes.

Paint API

Register a PaintWorklet class and use it as a CSS background-image value via paint(yourWorkletName). The worklet receives a canvas-like context, the element's dimensions, and any registered custom properties — and paints on every repaint.

/* 1. Register the worklet */
await CSS.paintWorklet.addModule('pattern-worklet.js');

/* 2. Use it in CSS */
.my-element {
  background-image: paint(patternPainter);
  --pattern-density: 12;
  --pattern-size: 40;
}

@property — Typed Custom Properties

@property lets you declare the type, initial value, and inheritance of custom properties. This unlocks CSS transitions on things like colors and numbers that were previously un-interpolatable.

@property --pattern-color-h {
  syntax: '<number>';
  inherits: false;
  initial-value: 210;
}

.box {
  transition: --pattern-color-h 600ms ease;
}

Paint Worklet Class

Every paint worklet is a class with an inputProperties static getter and a paint() method. The browser calls paint() whenever it needs to render that element's background — efficiently, off the main thread.

class patternPainter {
  static get inputProperties() {
    return [
      '--pattern-density',
      '--pattern-color-h',
      '--pattern-size',
    ];
  }

  paint(ctx, size, props) {
    // ctx = CanvasRenderingContext2D-like
    // size = { width, height }
    // props = StylePropertyMapReadOnly
    const density = props.get('--pattern-density');
    // … draw with ctx …
  }
}

registerPaint('patternPainter', patternPainter);

Browser Support

CSS.paintWorklet ✓ 65+ ✗ No ✗ No

@property ✓ 85+ ✓ 128+ ✓ 16.4+

Properties & Values API (JS) ✓ 78+ ~ Flag ✗ No

Tip: Use @supports (background: paint(x)) or 'paintWorklet' in CSS to feature-detect and provide graceful fallbacks.

Act III

Live Pattern Playground

Drag the sliders to update @property custom properties. The paint worklet reads them and redraws instantly — no JavaScript polling required.

Pattern Properties

--pattern-density 12

Number of circles in the grid (1–50)

--pattern-color-h 210

Base hue for circle colors (0–360°)

--pattern-size 40

Maximum circle radius in px (5–100)

Generated CSS