---
title: "CSS Paint API: Animated Gradient"
date: "2018-07-15T00:00:00+00:00"
tags: ["Chrome","CSS","Houdini","JavaScript"]
project: null
---

# CSS Paint API: Animated Gradient

Source: https://greenzeta.com/update/css-paint-api-experiment-animated-gradient/
Last updated: 2018-07-15T00:00:00+00:00

Rather than write out a complex linear-gradient property to the style tag, this approach with the \#CSS Paint API uses a single numeric value. The gradient structure is offloaded to a \#JavaScript worklet for cleaner code. Right now the [Paint API works only in Chrome and Opera](https://caniuse.com/#feat=css-paint-api).   
 \[codepen\_embed height="395" theme\_id="dark" slug\_hash="EpPjEB" default\_tab="js,result" user="mwilber"\]See the Pen [CSS Paint API Experiment: Animated Gradient](https://codepen.io/mwilber/pen/EpPjEB/) by Matthew Wilber ([@mwilber](https://codepen.io/mwilber)) on [CodePen](https://codepen.io).\[/codepen\_embed\]