How to blur an image using CSS3 without cropping or fading the edges?

Question

How can you blur the image correctly with CSS3 without fading the edges or cropping the image?

Demo

The green BG problem shows:

HTML:

<div id="bg_img" classid="blink_me"></div> 

CSS

 /*regular way of doing it*/ body{ background-color: #0F0; margin: 0; padding: 0; } #bg_img{ filter: blur(50px); /*Set amount of blur, px units are bad when re-scaling the window size */ -webkit-filter: blur(50px); /*Set amount of blur, px units are bad when re-scaling the window size */ position:absolute; width: 100%; height: 100%; background-image: url(http://www.patan77.com/wallpaper/3d_cube_explosion_patan77.jpg); /*background image*/ background-repeat:no-repeat; background-size: cover; background-position: center center; } 

Answer 1

This is the solution I came across, a bit of a “hack” and a bit messy, but it works. (at least for me on chrome)

The way I did this was to first create a 3x3 grid and “mirror them” with a scale as well and slightly shift everything, and then I increased it to 300%, but here is the weird part to actually make it work. I’m making sure that it displays fragments outside the div, so I need to have a hidden animated div (#loading_dot in the code) in the correct z-index, forcing it to display everything.

// tip: use vh or vw instead of px for the blur scale.

Demo

Tiled Mirror Image

HTML:

 <a href='http://www.patan77.com' id='text_overlay' class='blink_me' target='_blank'>Patan77.com</a> <div id="loading_dot" class="blink_me"></div> <div id="wrapper0"> <div id="wrapper1"> <div id="wrapper2"> <div id="bg1" class="bg_img"></div> <div id="bg2" class="bg_img"></div> <div id="bg3" class="bg_img"></div> <div id="bg4" class="bg_img"></div> <div id="bg5" class="bg_img">Visible DIV</div> <div id="bg6" class="bg_img"></div> <div id="bg7" class="bg_img"></div> <div id="bg8" class="bg_img"></div> <div id="bg9" class="bg_img"></div> </div> </div> </div> 

CSS

 body{ background-color: #0F0; margin: 0; padding: 0; } #text_overlay{ position:absolute; z-index: 20; outline: none; text-decoration: none; font-family:Arial, Helvetica, sans-serif; color: #FFF; font-size: 3em; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) } .bg_img{ position:absolute; background-image: url(http://www.patan77.com/wallpaper/3d_cube_explosion_patan77.jpg); /*background image*/ background-repeat:no-repeat; background-size: cover; background-position: center center; width: calc(100% /3); height: calc(100% /3); } #wrapper0{ position:absolute; width: 100%; height: 100%; overflow:hidden; } #wrapper1{ position:absolute; width: 300%; /* 1 change these to 100% to zoom out*/ height: 300%; /* 2 change these to 100% to zoom out*/ top: -50%; /* 3 change these to 0 to zoom out*/ left: -50%; /* 4 change these to 0 to zoom out*/ z-index: 10; } #wrapper2{ filter: blur(6vh); /*Set amount of blur use vh units*/ -webkit-filter: blur(6vh); /*Set amount of blur use vh units*/ position:absolute; width: 100%; height: 100%; z-index: 10; } #bg1{ position:absolute; left: calc(-100% /6); top: calc(-100% /6); -webkit-transform: scale(-1,-1); transform: scale(-1,-1); } #bg2{ left:calc(100% /6); top: calc(-100% /6); -webkit-transform: scale(1,-1); transform: scale(1,-1); } #bg3{ left:calc(100% /2); top: calc(-100% /6); -webkit-transform: scale(-1,-1); transform: scale(-1,-1); } #bg4{ -webkit-transform: scale(-1,1); transform: scale(-1,1); left: calc(-100% /6); top:calc(100% /6); } #bg5{ left:calc(100% /6); top:calc(100% /6); color: #FFF; font-size:50px; text-align: center; } #bg6{ -webkit-transform: scale(-1,1); transform: scale(-1,1); left:calc(100% /2); top:calc(100% /6); } #bg7{ -webkit-transform: scale(-1,-1); transform: scale(-1,-1); left:calc(-100% /6); top:calc(100% /2); } #bg8{ -webkit-transform: scale(1,-1); transform: scale(1,-1); left:calc(100% /6); top:calc(100% /2); } #bg9{ -webkit-transform: scale(-1,-1); transform: scale(-1,-1); left:calc(100% /2); top:calc(100% /2); } .blink_me { -webkit-animation-name: blinker; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -moz-animation-name: blinker; -moz-animation-duration: 1s; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; animation-name: blinker; animation-duration: 1s; animation-timing-function: ease; animation-iteration-count: infinite; } @-moz-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } } @-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } } @keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } } 

Answer 2

Decision 2

A slightly more viable option, the syllable has two images, one image behind, which is also blurry, but slightly reduced, and those that are in the wrapper element with overflow: hidden;

Demo

HTML:

 <div id="bg_img_wrapper"> <div id="bg_img"></div> <div id="bg_img_scaled"></div> </div> 

CSS

 body{ background-color: #0F0; margin: 0; padding: 0; } #bg_img{ filter: blur(3vh); -webkit-filter: blur(3vh); position:absolute; width: 100%; height: 100%; background-image: url(http://www.patan77.com/wallpaper/3d_cube_explosion_patan77.jpg); /*background image*/ background-repeat:no-repeat; background-size: cover; background-position: center center; z-index:3; } #bg_img_scaled{ filter: blur(3vh); -webkit-filter: blur(3vh); position:absolute; width: 100%; height: 100%; background-image: url(http://www.patan77.com/wallpaper/3d_cube_explosion_patan77.jpg); /*background image*/ background-repeat:no-repeat; background-size: cover; background-position: center center; -webkit-transform: scale(1.2); transform: scale(1.2); z-index:2; } #bg_img_wrapper{ position:absolute; width: 100%; height: 100%; overflow: hidden; }