paint()
Syntax
css
paint(workletName, ...parameters)
where:
- workletName
-
The name of the registered worklet.
- parameters
-
Optional additional parameters to pass to the paintWorklet
Examples
Basic usage example
In JavaScript, we register the paint worklet:
js
CSS.paintWorklet.addModule("boxbg.js");
...then, in the CSS, we define the background-image
as a paint()
type with the worklet name, boxbg
, along with any variables (ex. --boxColor
and --widthSubtractor
) the worklet will use:
css
li {
background-image: paint(boxbg);
--boxColor: hsl(55 90% 60% / 1);
}
li:nth-of-type(3n) {
--boxColor: hsl(155 90% 60% / 1);
--widthSubtractor: 20;
}
li:nth-of-type(3n + 1) {
--boxColor: hsl(255 90% 60% / 1);
--widthSubtractor: 40;
}
The result will be the following:
With additional parameters
You can pass additional arguments via the CSS paint() function. In this example, we passed two arguments: whether the background-image on a group of list items is filled or just has a stroke outline, and the width of that outline:
css
li {
--boxColor: hsl(55 90% 60% / 1);
background-image: paint(hollowHighlights, stroke, 2px);
}
li:nth-of-type(3n) {
--boxColor: hsl(155 90% 60% / 1);
background-image: paint(hollowHighlights, filled, 3px);
}
li:nth-of-type(3n + 1) {
--boxColor: hsl(255 90% 60% / 1);
background-image: paint(hollowHighlights, stroke, 1px);
}
We've included a custom property in the selector block defining a boxColor. Custom properties are accessible to the PaintWorklet.
Specifications
Specification |
---|
CSS Painting API Level 1 # paint-notation |
Browser compatibility
BCD tables only load in the browser