How to blur text or image

How to blur text or image

How to blur text or image? Blurring a text or image on a web page is quite easy. Text blur or image blur can be done in many ways including applying a PHP filter on the fly or adding a filter in CSS.

In any case, blurring images and pictures is usually safe; however, it is important to say that sensitive or personal information should never be provided on the web even if blurred. Below you can find techniques to blur image or blur text.

Blur text

Blur text is very easy with CSS. You can add blur to your text to add some life to it. When talking about blurring text, let's demonstrate what we mean. The following is a span that has been blurred with CSS:

Text blurred with CSS

This is the code that was used to blur the text above:

<span style="width: 257; height: 50; font-size: 16pt; color: blue; Filter: Blur(Add = 1, Direction = 50, Strength = 7)">Text blurred with CSS</span>

Neat, isn't it?

What if I want to blur the whole page?

Blur text on the whole page is as easy as blurring a simple div. The only difference is that you have to assign ID to the body tag.

<body id="blur">
<a href="#" onclick="document.getElementById('blur').style.filter='blur(add=0, direction=225, strength=10)';return false;">blur this page</a>
<a href="#" onclick="document.getElementById('blur').style.filter='none';return false;">unblur this page</a>

The code above results in the whole page being blurred. Try it out here: BLUR THE WHOLE PAGE.

How to blur image - PHP imagefilter

There is one neat function in PHP which will do image blur for you. The function is called imagefilter with the IMG_FILTER_SELECTIVE_BLUR parameter. The following is an example of what you start with and what you get after you run your picture through the function:

Image before blur      Image after blur applied

The first image is what we passed to our script below. The second image is the output from our script.

echo "Image before blurring: <img src=\"blurimg.jpg\" /><br /><br />";

$im = imagecreatefromjpeg("blurimg.jpg");

if($im && imagefilter($im, IMG_FILTER_SELECTIVE_BLUR))
    imagejpeg($im, "blurimg2.jpg");
    echo "Image blurred: <img src=\"blurimg2.jpg\" /><br />";
    echo "Image blur failed.";

This function will blur the image on the fly. The disadvantage of this blur image method is that it does not give us options to adjust the degree of blurring.

Blur image with CSS

Another way to blur image is to use CSS, specifically so-called CSS Motion Blur filter.

<img src="images/blurimg.jpg" style="Filter: Blur(Add = 0, Direction = 225, Strength = 5)">

Here you can see what happens after applying the image blur CSS method.

Image blurred with CSS

You can see that this method allows you to select the direction and also the strength of the blur.

Blur image with PHP - pixel by pixel

Applying the PHP image filter is not very flexible. Another way to blur pictures is to iterate through each pixel in a picture and read the color value of all pixels surrounding it. The new color for each pixel is the average of its own plus the colors of those pixels around it.

function blur (&$image) {
    $imagex = imagesx($image);
    $imagey = imagesy($image);
    $dist = 2;

    for ($x = 0; $x < $imagex; ++$x) {
        for ($y = 0; $y < $imagey; ++$y) {
            $newr = 0;
            $newg = 0;
            $newb = 0;
            $colours = array();
            $thiscol = imagecolorat($image, $x, $y);
            for ($k = $x - $dist; $k <= $x + $dist; ++$k) {
                for ($l = $y - $dist; $l <= $y + $dist; ++$l) {
                    if ($k < 0) { $colours[] = $thiscol; continue; }
                    if ($k >= $imagex) { $colours[] = $thiscol; continue; }
                    if ($l < 0) { $colours[] = $thiscol; continue; }
                    if ($l >= $imagey) { $colours[] = $thiscol; continue; }
                    $colours[] = imagecolorat($image, $k, $l);

            foreach($colours as $colour) {
                $newr += ($colour >> 16) & 0xFF;
                $newg += ($colour >> 8) & 0xFF;
                $newb += $colour & 0xFF;
            $numelements = count($colours);
            $newr /= $numelements;
            $newg /= $numelements;
            $newb /= $numelements;
            $newcol = imagecolorallocate($image, $newr, $newg, $newb);
            imagesetpixel($image, $x, $y, $newcol);
    echo "Image before blurring: <img src=\"blurimg.jpg\" /><br /><br />";
    $im = imagecreatefromjpeg("blurimg.jpg");
    imagejpeg($im, "blurimg2.jpg");
    echo "Image blurred: <img src=\"blurimg2.jpg\" /><br />";

The function provided above produces the following output:

Image blur with PHP

Increase the dist parameter to increase the degree of blur.

Why blurring sensitive information is a bad idea

We all have seen photographs or images of people that have been blurred to hide faces. Here is an example of a blurred face image:

Blur image

This is ok for the most part. You can't see who is in the blurred image. There is no convenient way to reverse the blur image back into a good image so you could recognize the person. That is good so far. The problem is that people often resort to blurring sensitive information which is a very bad idea. Posting a blurred image of your credit card a web site is a very bad idea. Every image blur can be reverse engineered to its original shape.


Discuss this article or this topic in our discussion forum:
(The table bellow shows a list of 8 most recent topics posted in our discussion forum. Visit our discussion forum to see more. It is possible the links below are not related to this page, but you can be certain you will find related posts in the discussion forum. You can post one yourself too.)
Email this article to a friend:
2 + 6 - 3 = 
How can I link to this web page?

It is easy, just include the code provided below into your HTML code.

<a href="" title=" How to blur text or image" target="_blank">How to blur text or image</a>