Use Alpha Transparency on Any Color in CSS with a (tiny) Paint Worklet
Brought to you by Elastic
Elastic helps the world’s leading organizations put their data to work using the power of search. Elastic's produces are all open source and free. Our users can get started — or even build an entire solution — without ever having to pay for anything.
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.