0Pricing
CSS Academy · Lesson

CSS Paint API: Worklets

Create custom CSS background images and borders programmatically using Paint Worklets.

What is the CSS Paint API?

The CSS Paint API is a CSS Houdini feature that lets you write JavaScript worklet functions to programmatically generate backgrounds, borders, and masks — effectively extending what CSS background-image can render.

Paint Worklet Architecture

A Paint Worklet is a JavaScript file that runs in a separate worklet scope (not the main thread). It registers a custom CSS painter that can be used as a CSS value.

All lessons in this course

  1. The CSS Typed Object Model (OM)
  2. CSS Properties and Values API (@property)
  3. CSS Paint API: Worklets
  4. CSS Layout API and Scope
← Back to CSS Academy