W3cubDocs

/CSS

paint

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	Status	Comment
CSS Painting API Level 1 The definition of 'Paint Notation' in that specification.	Working Draft	Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
`paint()`	65	79	No	No	52	No