Blog

Backgrounds and Gradients: background-image, size, position, Multiple Layers, linear/radial/conic-gradient and image-set()

To keep text readable on an image, write a semi-transparent gradient layer before the image in background-image, pick the image with image-set() as 1x/2x and AVIF, and use the background shorthand with care because it also resets background-color. On Bookstore's campaign banner we measure the contrast ratio by reading pixels, fix the gray midpoint of sRGB with in oklch, and build a rating ring with conic-gradient and a skeleton that respects reduced motion.