<div class="box" style="--color:red">
  
</div>
<div class="box" style="--color:blue">
  
</div>
<script>
if (CSS.paintWorklet) {              CSS.paintWorklet.addModule('/t_afif/pen/b632d5b234846c35bfa075a19aa9487c.js');
}
</script>
.box {
  height: 100px;
  background:paint(draw);
}
registerPaint('draw', class {
  
   static get inputProperties() {return ['--color']}
   
   paint(ctx, size, properties) {
       const c = properties.get('--color');
      
       ctx.fillStyle = c;
       ctx.fillRect(0, 0, size.width, size.height);
   }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.