W3cubDocs

/CSS

paint()

The paint() CSS function defines an <image> value generated with a PaintWorklet.

Syntax

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:

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:

li {
   background-image: paint(boxbg);
   --boxColor: hsla(55, 90%, 60%, 1.0);
}
li:nth-of-type(3n) {
   --boxColor: hsla(155, 90%, 60%, 1.0);
   --widthSubtractor: 20;
}
li:nth-of-type(3n+1) {
   --boxColor: hsla(255, 90%, 60%, 1.0);
   --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:

li {
   --boxColor: hsla(55, 90%, 60%, 1.0);
   background-image: paint(hollowHighlights, stroke, 2px);
}

li:nth-of-type(3n) {
   --boxColor: hsla(155, 90%, 60%, 1.0);
   background-image: paint(hollowHighlights, filled,  3px);
}

li:nth-of-type(3n+1) {
   --boxColor: hsla(255, 90%, 60%, 1.0);
   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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
paint
65
79
No
No
52
No
65
65
No
47
No
9.2
additional_parameters
No
No
No
No
No
No
No
No
No
No
No
No

See also

© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/image/paint