April 15, 2012

Blured background image with css

Question by MSajjadi

Is there anyway to blur an image with CSS, specially for backgrounds?

Answer by phpGeek

Yes, there is.
You can use two different backgrounds, one with sharp color (the main picture) and another blurred picture:

body  {
  background: url(images/bg-solid.jpg) no-repeat;

#page-wrap {
  background: url(images/bg-blurry.jpg) no-repeat fixed;
  width: 500px; margin: 40px auto;

To see the detailed tutorial click here

For an image you can use svg filters as below:
The <feGaussianBlur> element is used to create blur effects:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
  • The id attribute of the element defines a unique name for
    the filter
  • The blur effect is defined with the element
  • The in=”SourceGraphic” part defines that the effect is created for
    the entire element
  • The stdDeviation attribute defines the amount of the blur
  • The filter attribute of the element links the element to the
    “f1” filter
    See here for detailed explanation

Answer by Starx

This is not possible through CSS.

You have to process the image using a server-side language and generate a blurry one and then use it in the CSS backgrounds.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!