DEV Community

Cover image for Blurry image backgrounds like on Instagram
Simon Köhler
Simon Köhler

Posted on

7 1

Blurry image backgrounds like on Instagram

A JavaScript/CSS prototype to automatically generate blurred background images from the image source of the original image. The img tag just has to be packed into a container. The rest is done by JavaScript and CSS filters.

TIP: If you use Twitter Bootstrap 5, you can also use the ratio classes (.ratio, .ratio-16x9) for the image container (.image-container).

NOTE: If you want to use this code for a live website, please add more CSS rules and better responsive handling ;-) It's not perfectly done yet!

Your Feedback is appreciated!

What do you think about this approach? Would you do it the same way? What would you do better in the current code? Just write it in the comments!

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more