IconVault logoIconVault
Sign in

CSS Paint API - Interactive CSS Lab | IconVault

Build Houdini registerPaint() worklets live in your browser. Edit paint code, tweak custom properties, preview instantly, copy the CSS.

All tools

CSS Paint API

Write registerPaint() worklets with live preview

5 of 5 free uses left
unknownThe CSS Paint API is Chromium-only. Firefox and Safari fall back to the background color, which is why the snippet includes one.

Worklet preset

#0f766e

5 of 5 free uses left. Edits and previews are unlimited, registering and copying count.

Live preview

Press "Paint it" to see your worklet draw this box

Worklet source (editable)

Keep the PAINT_NAME placeholder, it is replaced with a unique paint name on register.

CSS to use it
/* Press "Paint it" to register the worklet, then copy the CSS here. */
Worklet (registerPaint call)
class Painter {
  static get inputProperties() {
    return ["--paint-color", "--paint-size"];
  }
  paint(ctx, geom, props) {
    const size = Math.max(4, parseInt(props.get("--paint-size").toString(), 10) || 24);
    const color = props.get("--paint-color").toString().trim() || "#0f766e";
    const cols = Math.ceil(geom.width / size);
    const rows = Math.ceil(geom.height / size);
    for (let y = 0; y < rows; y++) {
      for (let x = 0; x < cols; x++) {
        if ((x + y) % 2 === 0) {
          ctx.fillStyle = color;
          ctx.fillRect(x * size, y * size, size, size);
        }
      }
    }
  }
}
registerPaint("my-paint", Painter);

About this tool

IconVault's CSS Paint API playground is a hands-on lab for the Houdini Paint API: the browser feature that lets you call registerPaint() in a worklet and draw element backgrounds with JavaScript canvas code. Pick a preset like checkerboard, stripes, polka dots or confetti, edit the worklet source directly, then adjust --paint-color and --paint-size custom properties and watch the preview repaint instantly.

Everything runs fully in your browser and is free to use. Pressing Paint it registers your worklet through CSS.paintWorklet.addModule() for real, and you can copy the worklet JavaScript plus the background-image: paint(name) CSS to drop into any project. Honest note: the Paint API is Chromium-only (Chrome, Edge, Opera), so the tool detects support and every snippet includes a background-color fallback for Firefox and Safari.

Frequently asked questions

Popular searches

css paint apihoudini paint apiregisterpaintcss paint workletpaint worklet examplecss houdini tutorialbackground image paintcss paint api browser supportregisterpaint examplehoudini css examplescss paint api firefoxcss paint api safaripaint worklet custom propertiesinputproperties paint workletcss paintworklet addmodulehoudini worklet tutorialcss paint api generatordynamic css backgrounds javascriptcanvas css backgroundprogrammatic css backgroundcss paint api demohoudini paint api demoregisterpaint worklet codecss paint checkerboardcss paint stripes patternpolka dot css background codeconfetti css backgroundcss paint api patternscustom css paint functioncss houdini paint api explainedwhat is css houdinihoudini apis listcss paint api vs canvaspaint worklet performancecss paint api fallbackbackground paint css functioncss paint worklet typescriptregisterpaint typescripthoudini paint api reactcss paint worklet not workingcss.paintworklet undefinedpaint worklet blob urlcss paint api 2026learn css houdiniinteractive css paint playgroundcss paint worklet buildergenerate paint worklet onlinecss paint api playgroundhoudini registerpaint tutorialcss custom paint demopaint worklet input properties examplecss paint api background pattern generator

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 →