Search

Use Alpha Transparency on Any Color in CSS with a (tiny) Paint Worklet

Show Notes

After struggling with a method to pull down the opacity (alpha transparency) of any color (say, a color as a custom property from a design system), Dave cooks up a very fancy idea. The idea is a paint() worklet (CSS Houdini). Because it is canvas-based, which can fill a rectangle with any color, and has a global method for adjusting the alpha.

Dave’s “Alpha Paintlet” is on GitHub.