How to make this image blur with css

Question

The below is the image which is already blur i mean i want to make other image blur like that image.

Below image with blur to make like the below image

The below image without blur but want to make like above image

The below is code i tried i don't know whether i correctly did or not i mean blur takes more effect to the image i just want to make light blur.

img {
    filter: blur(1px);
        -webkit-filter: blur(1px);
        -moz-filter: blur(1px);
        -o-filter: blur(1px);
        -ms-filter: blur(1px);
  
}

<div><img src="http://i.imgur.com/Cdd4Es3.jpg" /></div>

@AhmadAlfy my problem is image is changing more darken i want to make light blur — overflowstack9, Aug 02 '16 at 15:51
Your image is dark. Blurring will eventually average out to the dominate color, which looks like it'll be close to black. — André Dion, Aug 02 '16 at 15:53

score 4 · Accepted Answer · answered Aug 02 '16 at 16:05

Just add a gradient overlay

div {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
div::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, transparent 40%, rgba(255, 255, 255, .8));
}
img {
  display: block;
  filter: blur(2px);
}

<div>
  <img src="http://i.imgur.com/Cdd4Es3.jpg" />
</div>

score 1 · Answer 2 · answered Aug 02 '16 at 16:05

1

You can add multiple filters to get a desired result. I would add a brightness filter and increase the brightness of the image to 200%.

img {
  -webkit-filter: brightness(200%) blur(1px);
  filter: brightness(200%) blur(1px);
}

jsFiddle link

answered Aug 02 '16 at 16:05

Jason

26
5

score 0 · Answer 3 · answered Aug 02 '16 at 16:05

You can try adding one more css filter to lighten up the img like;

brightness(110%);

img {
    filter: blur(1px) brightness(110%);
        -webkit-filter: blur(1px) brightness(110%);
        -moz-filter: blur(1px) brightness(110%);
        -o-filter: blur(1px) brightness(110%);
        -ms-filter: blur(1px) brightness(110%);

}

How to make this image blur with css

3 Answers3