Lazy-load blurred background-image generator

An online tool which generates the code for a lazy-loaded blurred background-image – WIP in alpha

Mike Foskett - 26th February 2017 (update: 30-04-2017)

Show layers:

Drag & drop image file here

Background-color (averaged):

Image resolution (3-16px):

Blur filter (0-12 px):

Full-sized image URL: Fade-in (0-6 s):

CSS: Output overlay:

Colour format Hex: RGBa: HSL:

Background-color (averaged):

Blurred image data-uri (0 bytes):

Image full URL:

CSS

HTML