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:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
  <li>item 16</li>
  <li>item 17</li>
  <li>item 18</li>
  <li>item 19</li>
  <li>item 20</li>
</ul>

CSS.paintWorklet.addModule(
  "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);

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.

css types image paint()

Syntax

Examples

Basic usage example

With additional parameters

See also