MINIMAL CSS-ONLY BLURRY IMAGE PLACEHOLDERS

Summary from the TLDR Web Dev newsletter

You can use a CSS-only technique for creating blurry image placeholders (LQIPs) using a single custom property. The method encodes a simplified version of the image into a 20-bit integer hash, representing a base color and six brightness components. This integer is then unpacked and decoded in CSS using bit shifting and masking to generate radial gradients that approximate the original image.