Blur без JS: как CSS создаёт размытые заглушки для изображений

Представьте: на вашем сайте вместо сплошной пустоты или блоков скачут удобные размытые заглушки (LQIP), и всё это срабатывает без JavaScript, обёрток и лишней разметки. При этом цвет заглушек не выбирается вручную под каждую картинку, а подставляется автоматически на основе цветов изображения. Один кастомный CSS-переменный --lqip, немного битовой арифметики и радиальные градиенты — и браузер сам создаёт нужный LQIP-плейсхолдер.

Код битовой упаковки, ограничения css calc(), градиенты в сетке 3×2 и другие детали уже ждут вас в статье: https://leanrada.com/notes/css-only-lqip/

#фронтенд #css #lqip