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: 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:

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

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–2023 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