22

Is it possible to add a blur effect to an image using CSS and Javascript?

Olivier Lalonde
  • 19,423
  • 28
  • 76
  • 91

7 Answers7

35

Yep, this works a treat:

Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/greyscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more...

Pixastic works by utilizing the HTML5 Canvas element which provides access to raw pixel data, thereby opening up for more advanced image effects. This is where the "experimental" part comes into play. Canvas is only supported by some browsers and unfortunately Internet Explorer is not one of them. It is however well supported in both Firefox and Opera and support for Safari only just arrived with the recent Safari 4 (beta) release. Chrome currently works in the dev channel. A few of the effects have been simulated in IE using the age old proprietary filters. While these filters are much faster than their Canvas friends, they are few and limited. Hopefully we will one day have real Canvas on IE as well...

gnat
  • 6,213
  • 108
  • 53
  • 73
Barrie Reader
  • 10,647
  • 11
  • 71
  • 139
  • Spoil sport - put away your IE6 install and get with the program! (cheers for the +1 though) – Barrie Reader Feb 22 '11 at 12:01
  • 2
    @Clyde Lobo: If you check the site, you'll see that it runs quite happily in IE8, which is definitely not HTML5 compatible and the samples work. – Neil Knight Feb 22 '11 at 12:03
  • @Ardman : In the How part it says `Pixastic works by utilizing the HTML5 Canvas element which provides access to raw pixel data` , and as per my knowledge IE 8 doesn't have the canvas , so how does it wrk in it ? BTW , the library is awesome ;) – Clyde Lobo Feb 22 '11 at 12:07
  • 2
    If you read the site, it says `"A few of the effects have been simulated in IE using the age old proprietary filters. While these filters are much faster than their Canvas friends, they are few and limited."`. For instance, the greyscale effect on the homepage works in IE8. I'd imagine any of the `filter` effects will work in even IE6. – thirtydot Feb 22 '11 at 12:08
  • This is EIGHT years old, what did you expect? – Barrie Reader Dec 03 '19 at 15:44
15

Alternatively you could use StackBlur or Superfast Blur

Quasimondo
  • 2,485
  • 1
  • 22
  • 30
5

This is also good to consider:

http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

http://tympanus.net/codrops/2011/11/18/fullscreen-image-blur-effect-with-html5/

Luckylooke
  • 4,061
  • 4
  • 36
  • 49
4

Using CSS

.cbp-rfgrid li:hover img {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
filter: blur(2px);
}
Jaspreet Jolly
  • 1,235
  • 11
  • 26
2

StackBlur works: Here's how I'm using it: also, works on all browsers and ipad!! unlike webkit!!

download StackBlur v5.0 from here: StackBlurv5.0

HTML

<CANVAS ID="top"></CANVAS>
<SCRIPT TYPE="text/javascript" SRC="js/StackBlur.js"></SCRIPT>

CSS 

#top {                      
  border-radius:         28%;
  -o-border-radius:      28%;
  -webkit-border-radius: 28%;
  -moz-border-radius:    28%;
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 40;
  width: 208px;
  height: 208px;
}

JS

var topCan = document.getElementById("top");
var toptx  = topCan.getContext("2d");
toptx.drawImage(_specimenImage, 0, 0);
var blur   = 0;

blur       = Math.abs(_sliderF.getPosition(8, -8)); //this returns multiple values 
                                                    //based on a new slider position

stackBlurCanvasRGB("top", 0, 0, topCan.width, topCan.height, blur);

NOTES: Radius values for the stackBlurCanvasRGB function can range from I think 100 to -100.. just play with values, you'll get it working. ..CanvasRGB works faster than CanvasRGBA on iPad.. least that's what I'm noticing on iPad 4th gen.

Jonathan James
  • 219
  • 2
  • 7
1

With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image. For Chrome

See live demo and complete source code here

http://purpledesign.in/blog/adjust-an-image-using-css3-html5/

See the following code for more details.

To make an image gray:

img {
 -webkit-filter: grayscale(100%);
}

To give a sepia look:

img {
 -webkit-filter: sepia(100%);
}

To adjust brightness:

img {
 -webkit-filter: brightness(50%);
}

To adjust contrast:

img {
 -webkit-filter: contrast(200%);
}

To Blur an image:

img {
 -webkit-filter: blur(10px);
}
Raj Nandan Sharma
  • 3,694
  • 3
  • 32
  • 42
0

Try this:

let blur = document.querySelector("#blur");
let girlImg = document.querySelector("#girlImg");

blur.addEventListener('input', blurring);
function blurring(){
    girlImg.style.filter = `blur(${blur.value}px)`
}
<div>
  <span>Blur:</span>
  <input type="range" id="blur" min="0" max="50" value="0">
</div>

</br>

<img id="girlImg" src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" alt="girlImg" />
Narges
  • 39
  • 3