Gradientment – the Image Gradient Map Generator

Drop image here or X axis: 4 Y axis: 5 Use OKLCH (slower but more accurate) Copy CSS 0 bytes Gradientment converts your 2D images into two overlapping 1D gradients & spits out the highly-compacted CSS used to generate these gradient maps, for perceived-faster progressive image loading. Sure, you could use a single flat average colour to represent the image until it loads… But that’s literally the bare minimum you could do, with zero spatial data represented. Gradient maps provide a little more definition, for as few extra bytes of bloat as possible. Only 100 extra bytes with the default settings! How to use Gradientment Select an image on your device. Adjust the number of Rows and Columns down as low as looks good. Turn on OKLCH mode if you want extra accuracy in exchange for slower processing & another 18 bytes. Copy the CSS into your project, either directly into the style tag on the specific image in your HTML (best option) or into your CSS matching the image’s ID tag (not as good…