Image blur filter

Posted by Cătălin on Wed, 22 Mar 2017

How to apply a Gaussian blur to an image.

CSS

The value of ‘radius’ defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.


.img_blur {
  -webkit-filter: blur(18px);
  filter: blur(18px);
}

Demo codepen.io

PHP

Imagick::adaptiveBlurImage

Adds an adaptive blur filter to image. The intensity of an adaptive blur depends is dramatically decreased at edge of the image, whereas a standard blur is uniform across the image. This method is available if Imagick has been compiled against ImageMagick version 6.2.9 or newer.


header('Content-type: image/jpeg');
$image = new Imagick('img.jpg');
$image->blurImage(5,3);
echo $image;

web

Articles & Code Snippets

Image blur filter

Posted by Cătălin on Wed, 22 Mar 2017

How to apply a Gaussian blur to an image.

CSS

PHP

Imagick::adaptiveBlurImage

Archives

Articles & Snippets