<div class="blur-load" style="background-image: url('https://placehold.co/600x400/e2e8f0/ffffff?text=Loading')">
<img src="https://placehold.co/600x400/3b82f6/ffffff?text=High+Res+Image" loading="lazy" onload="this.classList.add('loaded')">
</div>
Back to Snippets
Image Blur-In Loading CSS
Improve the perceived speed of your site with this image loading technique. Images start blurred and transition smoothly to sharp focus once loaded, which creates a polished and professional user experience.
405