Lean Rada LQIP

Based on the amazing work of Lean Rada (Kalabasa) in their blog post at https://leanrada.com/notes/css-only-lqip.

Usage

Make sure you include this CSS

[style*="--lqip:"] {
	background-blend-mode: hard-light, hard-light, hard-light, hard-light, hard-light, hard-light, normal;
	background-image: radial-gradient(50% 75% at 16.67% 25%, var(--lqip-ca-clr), rgb(from var(--lqip-ca-clr) r g b / calc(100% - 2%)) 10%, rgb(from var(--lqip-ca-clr) r g b / calc(100% - 8%)) 20%, rgb(from var(--lqip-ca-clr) r g b / calc(100% - 18%)) 30%, rgb(from var(--lqip-ca-clr) r g b / calc(100% - 32%)) 40%, rgb(from var(--lqip-ca-clr) r g b / calc(32%)) 60%, rgb(from var(--lqip-ca-clr) r g b / calc(18%)) 70%, rgb(from var(--lqip-ca-clr) r g b / calc(8%)) 80%, rgb(from var(--lqip-ca-clr) r g b / calc(2%)) 90%, transparent), radial-gradient(50% 75% at 50% 25%, var(--lqip-cb-clr), rgb(from var(--lqip-cb-clr) r g b / calc(100% - 2%)) 10%, rgb(from var(--lqip-cb-clr) r g b / calc(100% - 8%)) 20%, rgb(from var(--lqip-cb-clr) r g b / calc(100% - 18%)) 30%, rgb(from var(--lqip-cb-clr) r g b / calc(100% - 32%)) 40%, rgb(from var(--lqip-cb-clr) r g b / calc(32%)) 60%, rgb(from var(--lqip-cb-clr) r g b / calc(18%)) 70%, rgb(from var(--lqip-cb-clr) r g b / calc(8%)) 80%, rgb(from var(--lqip-cb-clr) r g b / calc(2%)) 90%, transparent), radial-gradient(50% 75% at 83.33% 25%, var(--lqip-cc-clr), rgb(from var(--lqip-cc-clr) r g b / calc(100% - 2%)) 10%, rgb(from var(--lqip-cc-clr) r g b / calc(100% - 8%)) 20%, rgb(from var(--lqip-cc-clr) r g b / calc(100% - 18%)) 30%, rgb(from var(--lqip-cc-clr) r g b / calc(100% - 32%)) 40%, rgb(from var(--lqip-cc-clr) r g b / calc(32%)) 60%, rgb(from var(--lqip-cc-clr) r g b / calc(18%)) 70%, rgb(from var(--lqip-cc-clr) r g b / calc(8%)) 80%, rgb(from var(--lqip-cc-clr) r g b / calc(2%)) 90%, transparent), radial-gradient(50% 75% at 16.67% 75%, var(--lqip-cd-clr), rgb(from var(--lqip-cd-clr) r g b / calc(100% - 2%)) 10%, rgb(from var(--lqip-cd-clr) r g b / calc(100% - 8%)) 20%, rgb(from var(--lqip-cd-clr) r g b / calc(100% - 18%)) 30%, rgb(from var(--lqip-cd-clr) r g b / calc(100% - 32%)) 40%, rgb(from var(--lqip-cd-clr) r g b / calc(32%)) 60%, rgb(from var(--lqip-cd-clr) r g b / calc(18%)) 70%, rgb(from var(--lqip-cd-clr) r g b / calc(8%)) 80%, rgb(from var(--lqip-cd-clr) r g b / calc(2%)) 90%, transparent), radial-gradient(50% 75% at 50% 75%, var(--lqip-ce-clr), rgb(from var(--lqip-ce-clr) r g b / calc(100% - 2%)) 10%, rgb(from var(--lqip-ce-clr) r g b / calc(100% - 8%)) 20%, rgb(from var(--lqip-ce-clr) r g b / calc(100% - 18%)) 30%, rgb(from var(--lqip-ce-clr) r g b / calc(100% - 32%)) 40%, rgb(from var(--lqip-ce-clr) r g b / calc(32%)) 60%, rgb(from var(--lqip-ce-clr) r g b / calc(18%)) 70%, rgb(from var(--lqip-ce-clr) r g b / calc(8%)) 80%, rgb(from var(--lqip-ce-clr) r g b / calc(2%)) 90%, transparent), radial-gradient(50% 75% at 83.33% 75%, var(--lqip-cf-clr), rgb(from var(--lqip-cf-clr) r g b / calc(100% - 2%)) 10%, rgb(from var(--lqip-cf-clr) r g b / calc(100% - 8%)) 20%, rgb(from var(--lqip-cf-clr) r g b / calc(100% - 18%)) 30%, rgb(from var(--lqip-cf-clr) r g b / calc(100% - 32%)) 40%, rgb(from var(--lqip-cf-clr) r g b / calc(32%)) 60%, rgb(from var(--lqip-cf-clr) r g b / calc(18%)) 70%, rgb(from var(--lqip-cf-clr) r g b / calc(8%)) 80%, rgb(from var(--lqip-cf-clr) r g b / calc(2%)) 90%, transparent), linear-gradient(0deg, var(--lqip-base-clr), var(--lqip-base-clr));

	--lqip-ca-clr: hsl(0 0% calc((mod(round(down, calc((var(--lqip) + pow(2, 19)) / pow(2, 18))), 4)) / 3 * 60% + 20%));
	--lqip-cb-clr: hsl(0 0% calc((mod(round(down, calc((var(--lqip) + pow(2, 19)) / pow(2, 16))), 4)) / 3 * 60% + 20%));
	--lqip-cc-clr: hsl(0 0% calc((mod(round(down, calc((var(--lqip) + pow(2, 19)) / pow(2, 14))), 4)) / 3 * 60% + 20%));
	--lqip-cd-clr: hsl(0 0% calc((mod(round(down, calc((var(--lqip) + pow(2, 19)) / pow(2, 12))), 4)) / 3 * 60% + 20%));
	--lqip-ce-clr: hsl(0 0% calc((mod(round(down, calc((var(--lqip) + pow(2, 19)) / pow(2, 10))), 4)) / 3 * 60% + 20%));
	--lqip-cf-clr: hsl(0 0% calc((mod(round(down, calc((var(--lqip) + pow(2, 19)) / pow(2, 8))), 4)) / 3 * 60% + 20%));
	--lqip-base-clr: oklab(calc((mod(round(down, calc((var(--lqip) + pow(2, 19)) / pow(2, 6))), 4)) / 3 * 0.6 + 0.2) calc((mod(round(down, calc((var(--lqip) + pow(2, 19)) / pow(2, 3))), 8)) / 8 * 0.7 - 0.35) calc(((mod(calc(var(--lqip) + pow(2, 19)), 8)) + 1) / 8 * 0.7 - 0.35));
}

and then you can set an image's placeholder by setting the css attribute --lqip

import {encodeToLeanradaLqip} from "@nnilky/leanrada-lqdip";

export default function Image(props: { href: string }) {
    const lqip = encodeToLeanradaLqip(resolve(props.href))
    return <img
        src={props.href}
        style={{ "--lqip": lqip }}
    />
}