Firefox Tomorrow

css function

`paint()` CSS function

View on MDN ↗

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
    • : Optional additional parameters to pass to the paintWorklet

Formal syntax

Examples

Basic CSS paint() usage

Given the following HTML:

<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 N</li>
</ul>

In JavaScript, we register the paint worklet:

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

In the CSS, we define the background-image as a paint() type with the worklet name, boxbg, along with any variables (ex. --box-color and --width-subtractor) the worklet will use:

body {
  font: 1.2em / 1.2 sans-serif;
}
li {
  background-image: paint(boxbg);
  --box-color: hsl(55 90% 60%);
}

li:nth-of-type(3n) {
  --box-color: hsl(155 90% 60%);
  --width-subtractor: 20;
}

li:nth-of-type(3n + 1) {
  --box-color: hsl(255 90% 60%);
  --width-subtractor: 40;
}
Interactive exampleOpen the canonical MDN source to run this embedded demo.

CSS paint() with parameters

You can pass optional arguments in the CSS paint() function. In this example, we passed two arguments that control whether the background-image on a group of list items is filled or 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 N</li>
</ul>

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

body {
  font: 1.2em / 1.2 sans-serif;
}

li {
  --box-color: hsl(55 90% 60% / 100%);
  background-image: paint(hollow-highlights, stroke, 2px);
}

li:nth-of-type(3n) {
  --box-color: hsl(155 90% 60% / 100%);
  background-image: paint(hollow-highlights, filled, 3px);
}

li:nth-of-type(3n + 1) {
  --box-color: hsl(255 90% 60% / 100%);
  background-image: paint(hollow-highlights, stroke, 1px);
}

We’ve included a custom property in the selector block defining a boxColor. Custom properties are accessible to the PaintWorklet.

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also