This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.
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
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: 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
Specification | Status | Comment |
---|---|---|
CSS Painting API Level 1The definition of 'Paint Notation' in that specification. | Working Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
paint()
|
Chrome
Full support 65 |
Edge
Full support 79 |
Firefox
No support No |
IE
No support No |
Opera
Full support 52 |
Safari
No support No |
WebView Android
Full support 65 |
Chrome Android
Full support 65 |
Firefox Android
No support No |
Opera Android
Full support 47 |
Safari iOS
No support No |
Samsung Internet Android
Full support 9.2 |
Legend
- Full support
- Full support
- No support
- No support
See also
paint() by Mozilla Contributors is licensed under CC-BY-SA 2.5.