This is an experimental technology
Check 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
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
Specification | Status | Comment |
---|---|---|
CSS Painting API Level 1 The 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.
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