paint()
Experimental: 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
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:
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 |
---|
CSS Painting API Level 1 # paint-notation |
Browser compatibility
BCD tables only load in the browser