CODEWITHSUNDEEP
htmlcssfilter
Startec
Startec

Reputation: 13206

Blur the edges of an image or background image with CSS

I know there are a bunch of new CSS filters and I am wondering if there is a way to apply those to an image or background image. Everything I have read talks about softening the image with a drop shadow, however, a drop shadow is a color, and I want to blur the edges of images so that I could blend them together more seamlessly if they were next to each other. Right now it looks like you can only go with a drop shadow or apply a blur to the entire image (based on what I have read).

The closest I can come up with is a semi-transparent box shadow....like this

-webkit-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);

Upvotes: 53

Views: 213829

Answers (5)

Bartosz546
Bartosz546

Reputation: 105

This is the best tutorial I found on blurring edges of actual img html element.

Create element overlapping the one you want the blur edge effect on and add box shadow on that element. You can use :after on the on the img parent element.

Upvotes: 0

Leonardo
Leonardo

Reputation: 1692

I'm not entirely sure what visual end result you're after, but here's an easy way to blur an image's edge: place a div with the image inside another div with the blurred image.

Working example here: http://jsfiddle.net/ZY5hn/1/

Screenshot

Code snippet:

.placeholder {
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px;
  width: 200px;
  height: 200px;
  position: relative;
  /* this is the only relevant part for the example */
}


/* both DIVs have the same image */

.bg-image-blur,
.bg-image {
  background-image: url('https://picsum.photos/200/300');
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* blur the background, to make blurred edges that overflow the unblurred image that is on top */

.bg-image-blur {
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
}


/* I added this DIV in case you need to place content inside */

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  text-shadow: 0 0 3px #000;
  text-align: center;
  font-size: 30px;
}
HTML:

<div class="placeholder">
  <!-- blurred background image for blurred edge -->
  <div class="bg-image-blur"></div>
  <!-- same image, no blur -->
  <div class="bg-image"></div>
  <!-- content -->
  <div class="content">Blurred Image Edges</div>
</div>

Notice the blurred effect is using the image, so it changes with the image color.

I hope this helps.

Upvotes: 21

Leonardo
Leonardo

Reputation: 1692

If what you're looking for is simply to blur the image edges you can simply use the box-shadow with an inset.

Working example: http://jsfiddle.net/d9Q5H/1/

Screenshot

Code snippet:

.image-blurred-edge {
  background-image: url('https://picsum.photos/200/300');
  width: 200px;
  height: 200px;
  /* you need to match the shadow color to your background or image border for the desired effect*/
  box-shadow: 0 0 8px 8px white inset;
}
<div class="image-blurred-edge"></div>

Upvotes: 135

Y.S.
Y.S.

Reputation: 317

If you set the image in div, you also must set both height and width. This may cause the image to lose its proportion. In addition, you must set the image URL in CSS instead of HTML.

Instead, you can set the image using the IMG tag. In the container class you can only set the width in percent or pixel and the height will automatically maintain proportion.

This is also more effective for accessibility of search engines and reading engines to define an image using an IMG tag.

.container {
    margin: auto;
    width: 200px;
    position: relative;
}

img {
    width: 100%;
}

.block {
    width: 100%;
    position: absolute;
    bottom: 0px;
    top: 0px;
    box-shadow: inset -10px -10px 10px 20px white;
}
<div class="container">
    <img src="https://picsum.photos/200/200">
    <!-- http://lorempixel.com/200/200/city -->
    <div class="block"></div>
</div>

Upvotes: 7

Sunny
Sunny

Reputation: 11

<html>
<head>
<meta charset="utf-8">
<title>test</title>

<style>
#grad1 {
  height: 400px;
  width: 600px;
  background-image: url(t1.jpg);/* Select Image Hare */
}


#gradup {
  height: 100%;
  width: 100%;
  background: radial-gradient(transparent 20%, white 70%); /* Set radial-gradient to faded edges */

}
</style>

</head>

<body>
<h1>Fade Image Edge With Radial Gradient</h1>

<div id="grad1"><div id="gradup"></div></div>

</body>
</html>

Upvotes: 0

Related Questions