BASELINE NowYouCanUse.com
Limited Availability CSS
id: paint

paint()

The paint() CSS function creates a custom image, drawn using a paint worklet, for an element's background or border.
Baseline Status: This feature is currently Limited and is missing in at least one major browser engine.
Desktop Browser Engine Support
Google Chrome
65
Supported
Mozilla Firefox
—
Unsupported
Apple Safari
—
Unsupported
Microsoft Edge
79
Supported
Mobile Browser Engine Support
Chrome Android
65
Firefox Android
—
Safari iOS
—
Specifications and References
Specification ↗ Can I Use (css-paint-api) ↗ Feature XML ↗
MDN Browser Compat Data Keys:
api.CSS.paintWorklet_static ↗ api.PaintRenderingContext2D ↗ api.PaintRenderingContext2D.beginPath ↗ api.PaintRenderingContext2D.clearRect ↗ api.PaintRenderingContext2D.clip ↗ api.PaintRenderingContext2D.createLinearGradient ↗ api.PaintRenderingContext2D.createPattern ↗ api.PaintRenderingContext2D.createRadialGradient ↗ api.PaintRenderingContext2D.drawImage ↗ api.PaintRenderingContext2D.fill ↗ api.PaintRenderingContext2D.fillRect ↗ api.PaintRenderingContext2D.fillStyle ↗ api.PaintRenderingContext2D.filter ↗ api.PaintRenderingContext2D.getLineDash ↗ api.PaintRenderingContext2D.getTransform ↗ api.PaintRenderingContext2D.globalAlpha ↗ api.PaintRenderingContext2D.globalCompositeOperation ↗ api.PaintRenderingContext2D.imageSmoothingEnabled ↗ api.PaintRenderingContext2D.imageSmoothingQuality ↗ api.PaintRenderingContext2D.isPointInPath ↗ api.PaintRenderingContext2D.isPointInStroke ↗ api.PaintRenderingContext2D.lineCap ↗ api.PaintRenderingContext2D.lineDashOffset ↗ api.PaintRenderingContext2D.lineJoin ↗ api.PaintRenderingContext2D.lineWidth ↗ api.PaintRenderingContext2D.miterLimit ↗ api.PaintRenderingContext2D.resetTransform ↗ api.PaintRenderingContext2D.restore ↗ api.PaintRenderingContext2D.rotate ↗ api.PaintRenderingContext2D.save ↗ api.PaintRenderingContext2D.scale ↗ api.PaintRenderingContext2D.setLineDash ↗ api.PaintRenderingContext2D.setTransform ↗ api.PaintRenderingContext2D.shadowBlur ↗ api.PaintRenderingContext2D.shadowColor ↗ api.PaintRenderingContext2D.shadowOffsetX ↗ api.PaintRenderingContext2D.shadowOffsetY ↗ api.PaintRenderingContext2D.stroke ↗ api.PaintRenderingContext2D.strokeRect ↗ api.PaintRenderingContext2D.strokeStyle ↗ api.PaintRenderingContext2D.transform ↗ api.PaintRenderingContext2D.translate ↗ api.PaintSize ↗ api.PaintSize.height ↗ api.PaintSize.width ↗ api.PaintWorkletGlobalScope ↗ api.PaintWorkletGlobalScope.devicePixelRatio ↗ api.PaintWorkletGlobalScope.registerPaint ↗ css.types.image.paint ↗ css.types.image.paint.additional_parameters ↗