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 (CSS Painting API 1) # paint-notation

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`paint()`	65	79	No	No	52	No	65	65	No	47	No	9.2