Limited supportUse with care and confirm browser support before shipping it to all users.
Syntax and cascade Limited support

paint()

The paint() CSS function creates a custom image, drawn using a paint worklet, for an element's background or border. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Syntax and cascadeVisual styling

Overview

The paint() CSS function creates a custom image, drawn using a paint worklet, for an element's background or border. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
PaintRenderingContext2D
65
79
65
paintWorklet_static
Experimental

The static, read-only paintWorklet property of the CSS interface provides access to the paint worklet, which programmatically generates an image where a CSS property expects a file.
65
79
65
beginPath

The CanvasRenderingContext2D.beginPath() method of the Canvas 2D API starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
65
79
65
clearRect

The CanvasRenderingContext2D.clearRect() method of the Canvas 2D API erases the pixels in a rectangular area by setting them to transparent black.
65
79
65
clip

The CanvasRenderingContext2D.clip() method of the Canvas 2D API turns the current or given path into the current clipping region. The previous clipping region, if any, is intersected with the current or given path to create the new clipping region.
65
79
65
createLinearGradient

The CanvasRenderingContext2D.createLinearGradient() method of the Canvas 2D API creates a gradient along the line connecting two given coordinates.
65
79
65
createPattern

The CanvasRenderingContext2D.createPattern() method of the Canvas 2D API creates a pattern using the specified image and repetition. This method returns a CanvasPattern.
65
79
65
createRadialGradient

The CanvasRenderingContext2D.createRadialGradient() method of the Canvas 2D API creates a radial gradient using the size and coordinates of two circles.
65
79
65
drawImage

The CanvasRenderingContext2D.drawImage() method of the Canvas 2D API provides different ways to draw an image onto the canvas.
65
79
65
fill

The CanvasRenderingContext2D.fill() method of the Canvas 2D API fills the current or given path with the current CanvasRenderingContext2D.fillStyle.
65
79
65
fillRect

The CanvasRenderingContext2D.fillRect() method of the Canvas 2D API draws a rectangle that is filled according to the current CanvasRenderingContext2D.fillStyle.
65
79
65
fillStyle

The CanvasRenderingContext2D.fillStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use inside shapes. The default style is black.
65
79
65
filter
Non-standard

The CanvasRenderingContext2D.filter property of the Canvas 2D API provides filter effects such as blurring and grayscaling. It is similar to the CSS filter property and accepts the same values.
65
79
65
getLineDash

The getLineDash() method of the Canvas 2D API's CanvasRenderingContext2D interface gets the current line dash pattern.
65
79
65
getTransform

The CanvasRenderingContext2D.getTransform() method of the Canvas 2D API retrieves the current transformation matrix being applied to the context.
68
79
68
globalAlpha

The CanvasRenderingContext2D.globalAlpha property of the Canvas 2D API specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.
65
79
65
globalCompositeOperation

The CanvasRenderingContext2D.globalCompositeOperation property of the Canvas 2D API sets the type of compositing operation to apply when drawing new shapes.
65
79
65
imageSmoothingEnabled

The imageSmoothingEnabled property of the CanvasRenderingContext2D interface, part of the Canvas API, determines whether scaled images are smoothed (true, default) or not (false). On getting the imageSmoothingEnabled property, the last value it was set to is returned.
65
79
65
imageSmoothingQuality

The imageSmoothingQuality property of the CanvasRenderingContext2D interface, part of the Canvas API, lets you set the quality of image smoothing.
134
134
134
isPointInPath

The CanvasRenderingContext2D.isPointInPath() method of the Canvas 2D API reports whether or not the specified point is contained in the current path.
65
79
65
isPointInStroke

The CanvasRenderingContext2D.isPointInStroke() method of the Canvas 2D API reports whether or not the specified point is inside the area contained by the stroking of a path.
65
79
65
lineCap

The CanvasRenderingContext2D.lineCap property of the Canvas 2D API determines the shape used to draw the end points of lines.
65
79
65
lineDashOffset

The CanvasRenderingContext2D.lineDashOffset property of the Canvas 2D API sets the line dash offset, or "phase."
65
79
65
lineJoin

The CanvasRenderingContext2D.lineJoin property of the Canvas 2D API determines the shape used to join two line segments where they meet.
65
79
65
lineWidth

The CanvasRenderingContext2D.lineWidth property of the Canvas 2D API sets the thickness of lines.
65
79
65
miterLimit

The CanvasRenderingContext2D.miterLimit property of the Canvas 2D API sets the miter limit ratio.
65
79
65
resetTransform

The CanvasRenderingContext2D.resetTransform() method of the Canvas 2D API resets the current transform to the identity matrix.
65
79
65
restore

The CanvasRenderingContext2D.restore() method of the Canvas 2D API restores the most recently saved canvas state by popping the top entry in the drawing state stack. If there is no saved state, this method does nothing.
65
79
65
rotate

The CanvasRenderingContext2D.rotate() method of the Canvas 2D API adds a rotation to the transformation matrix.
65
79
65
save

The CanvasRenderingContext2D.save() method of the Canvas 2D API saves the entire state of the canvas by pushing the current state onto a stack.
65
79
65
scale

The CanvasRenderingContext2D.scale() method of the Canvas 2D API adds a scaling transformation to the canvas units horizontally and/or vertically.
65
79
65
setLineDash

The setLineDash() method of the Canvas 2D API's CanvasRenderingContext2D interface sets the line dash pattern used when stroking lines. It uses an array of values that specify alternating lengths of lines and gaps which describe the pattern.
65
79
65
setTransform

The CanvasRenderingContext2D.setTransform() method of the Canvas 2D API resets (overrides) the current transformation to the identity matrix, and then invokes a transformation described by the arguments of this method. This lets you scale, rotate, translate (move), and skew the context.
68
79
68
shadowBlur

The CanvasRenderingContext2D.shadowBlur property of the Canvas 2D API specifies the amount of blur applied to shadows. The default is 0 (no blur).
65
79
65
shadowColor

The CanvasRenderingContext2D.shadowColor property of the Canvas 2D API specifies the color of shadows.
65
79
65
shadowOffsetX

The CanvasRenderingContext2D.shadowOffsetX property of the Canvas 2D API specifies the distance that shadows will be offset horizontally.
65
79
65
shadowOffsetY

The CanvasRenderingContext2D.shadowOffsetY property of the Canvas 2D API specifies the distance that shadows will be offset vertically.
65
79
65
stroke

The CanvasRenderingContext2D.stroke() method of the Canvas 2D API strokes (outlines) the current or given path with the current stroke style.
65
79
65
strokeRect

The CanvasRenderingContext2D.strokeRect() method of the Canvas 2D API draws a rectangle that is stroked (outlined) according to the current CanvasRenderingContext2D.strokeStyle and other context settings.
65
79
65
strokeStyle

The CanvasRenderingContext2D.strokeStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use for the strokes (outlines) around shapes. The default is black.
65
79
65
transform

The CanvasRenderingContext2D.transform() method of the Canvas 2D API multiplies the current transformation with the matrix described by the arguments of this method. This lets you scale, rotate, translate (move), and skew the context.
65
79
65
translate

The CanvasRenderingContext2D.translate() method of the Canvas 2D API adds a translation transformation to the current matrix.
65
79
65
PaintSize

The PaintSize interface of the CSS Painting API represents the size of the output bitmap that the author should draw.
65
79
65
height

The height read-only property of the PaintSize interface returns the height of the output bitmap that the author should draw.
65
79
65
width

The width read-only property of the PaintSize interface returns the width of the output bitmap that the author should draw.
65
79
65
PaintWorkletGlobalScope
Experimental

The PaintWorkletGlobalScope interface of the CSS Painting API represents the global object available inside a paint Worklet.
65
79
65
devicePixelRatio
Experimental

The devicePixelRatio read-only property of the PaintWorkletGlobalScope interface returns the current device's ratio of physical pixels to logical pixels.
65
79
65
registerPaint
Experimental

The registerPaint() method of the PaintWorkletGlobalScope interface registers a class to programmatically generate an image where a CSS property expects a file.
65
79
65
CSS type
paint

The paint() CSS function defines an image value generated with a PaintWorklet.
65
79
65
paint.additional parameters

Supports additional parameters to pass to the `paintWorklet`
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.element {
  background-image: paint(my-pattern);
  --pattern-color: #3498db;
  --pattern-size: 20;
}

Live demo

custompattern

CSS custompattern demo.

PreviewFullscreen

Color change

CSS Colorchange demo.

PreviewFullscreen

Resize

CSS Sizechange demo.

PreviewFullscreen

Use cases

  • Use paint()

    Use paint() when the default CSS behavior is not expressive enough for the component or layout you are building.

  • Handle edge cases

    Apply paint() to solve a specific styling constraint without introducing broader layout or behavior changes.

Cautions

  • Test paint() in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
  • Plan a fallback or acceptable degradation path when support is still limited.

Accessibility

  • Confirm that using paint() does not make content harder to perceive, understand, or operate in assistive contexts.

Related links

Powered by web-features