Creating a blurred background effect using pure CSS – no images allowed (x-post /r/webdev)

Hey /r/web_design! I posted this over at /r/webdev but thought it applied here too, hence the x-post.

The guys at our shop came up with a unique solution to a specific problem we ran into, and I thought it might be helpful to others here.

Basically, we are working on a project where bandwidth management is hugely important – so no huge images. One of our designers was working on a UI design and wanted to know if it was possible to recreate the iOS-style blurred background effect without using any images.

We dug around a bit, and everything we could find that was already out there used images, and thus didn't work for us. So we experimented a bit and figured out how to do it using pure CSS. Here's the link:

Creating a Blurred Background Using Only CSS

It's just a quick proof of concept, and only works in modern browsers, but hey – thought it might be helpful to you guys here.

Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted January 04, 2016 at 09:26PM by thearchvolta http://ift.tt/1Z361gn