Lazy Load / Blur-Up Image Generator

Generate a blurred placeholder and code for a lazy-load effect.

1. Upload Image

Click or drag & drop

2. Add HTML

3. Add CSS


.blur-up-container {
  position: relative;
  overflow: hidden;
}
.placeholder-img {
  width: 100%;
  height: auto;
  filter: blur(20px);
  transform: scale(1.1);
}
.full-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}
.full-img[src]:not([src='']) {
  opacity: 1;
}