Image Right Edge Fade/Blur CSS

Blur the edges of an image or background image with CSS

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/

HTML:

<div class="image-blurred-edge"></div>

CSS

.image-blurred-edge {
    background-image: url('http://lorempixel.com/200/200/city/9');
    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;
}

Image Right Edge Fade/Blur CSS

Two methods

Let's make this:

1. Using box-shadow

Browser Compatibility: IE 9 + for box-shadow.

• Place appropriate box-shadow inset in the div

• The div is given left padding to line it's text up with the white part of the background (the box-sizing: border-box essentially absorbs the padding into the width)

Box-shadow example

div {
  background: url(https://i.stack.imgur.com/AF4np.jpg) no-repeat;
  height: 500px;
  width: 500px;
  border: solid 1px #000;
  padding-left: 300px;
  box-sizing: border-box;
  box-shadow: inset -350px 0 100px 0 #FFF;
}

<div>
  <h1>Title</h1>
  <p>Paragraph</p>
  <a>Link</a>
</div>

Blur the border of an Image

Looking at your comments on Sagar Kodte's answer, is this what you wanted?

img {  border: 2px solid #000;  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.8);}

<img src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />

CSS - Fading All Edges of div to Transparent over Defined Distance

I've used box shadows in the past to achieve this sort of effect.

  box-shadow: 0px 0px 25px 25px rgba(55,54,51, 1);

By adding a box shadow with a translation of 0px in any direction, a spread distance of 25px, and a blur radius of 25px, it makes it the 50px blur you like. By changing the margin to 50px and using top, right, etc. for positioning you can get it exactly where you want.

HTML:

<div class="formBackground">
  <form id="gform" method="POST" action="***">
    <input type="text" id="name" name="name" placeholder="Name" style="width: 100%; float: left;">
    <input type="text" id="email" name="email" placeholder="Email" style="width: 100%; float: left;">
    <input type="textarea" id="message" name="message" placeholder="Write your message here..." style="width: 100%; float: left;">
  </form>
</div>

CSS:

.formBackground {
    height: auto;
    background-color : rgba(55,54,51, 1);
    overflow: hidden;
    margin: 50px;
    box-shadow: 0px 0px 25px 25px rgba(55,54,51, 1);
}

How to blur image edges in foreground when using Bootstrap 4

You need to wrap img tag by div element with class name of .img-blur so use the :after pseudo-element can be used to insert some content after the content of an element.

.img-blur{  position: relative;  display: inline-block;}.img-blur:after {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  box-shadow: inset 0 0 10px 10px #ffffff;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">  <div class="row" >    <div class="col-4 my-3">      <div class="img-blur">        <img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">      </div>    </div>    <div class="col-4 my-3">      <div class="img-blur">        <img class="img-fluid" src="https://via.placeholder.com/400x400/ffff22">      </div>    </div>    <div class="col-4 my-3">      <div class="img-blur">        <img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">      </div>    </div>  </div></div>

CSS - How do I blur the left and right side of an image with CSS

You could do something like this. Experiment with the opacity value and color on left and right.

.container {  position: relative;  display: inline-block;}
.left, .right {  position: absolute;  width: 50px;  top: 0;  bottom: 0;  background: white;  opacity: 0.5;}
.right {  right: 0;}

<div class="container">  <div class="left"></div>  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="Sample Image" />  <div class="right"></div></div>

How to fade edges of background image of element to blend in with the main background image?

You can use the mask-* CSS properties to achieve the effect.

The following example produce a 10px long fading edge.

.body {
  display: grid;
  width: 200px;
  height: 200px;
  /* replace with the image you like here */
  background-image: repeating-linear-gradient(-45deg,
      yellow,
      yellow 20px,
      black 20px,
      black 40px);
}

.content {
  margin: 25px;
  /* replace with the image you like here */
  background-image: linear-gradient(to top, blue 0%, blue 100%);
  
  /* for webkit-based browsers */
  -webkit-mask-image:
    linear-gradient(to top, black 0%, black 100%),
    linear-gradient(to top, transparent 0%, black 100%),
    linear-gradient(to right, transparent 0%, black 100%),
    linear-gradient(to bottom, transparent 0%, black 100%),
    linear-gradient(to left, transparent 0%, black 100%);
  -webkit-mask-position:
    center,
    top,
    right,
    bottom,
    left;
  -webkit-mask-size:
    100% 100%,
    100% 10px,
    10px 100%,
    100% 10px,
    10px 100%;
  -webkit-mask-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
   -webkit-mask-composite:
    source-out,
    source-over,
    source-over,
    source-over;
    
   /* for browsers which have implemented the official spec */
  mask-image:
    linear-gradient(to top, black 0%, black 100%),
    linear-gradient(to top, transparent 0%, black 100%),
    linear-gradient(to right, transparent 0%, black 100%),
    linear-gradient(to bottom, transparent 0%, black 100%),
    linear-gradient(to left, transparent 0%, black 100%);
  mask-position:
    center,
    top,
    right,
    bottom,
    left;
  mask-size:
    100% 100%,
    100% 10px,
    10px 100%,
    100% 10px,
    10px 100%;
  mask-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  mask-composite:
    subtract,
    add,
    add,
    add;
}

<div class="body">
  <div class="content"></div>
</div>

CSS - Remove background faded edges

You can also offset top, right, bottom, left with negative %. And then add the offset as % to the width and height. This, of course, assuming you are not too concerned with cropping the image slightly.

e.g. https://jsfiddle.net/mwzddfs6/

<div class="content"></div>

.content {
  overflow: auto;
  position: relative;
}
.content:before {
  content: "";
  position: fixed;
  left: -1%;
  right: -1%;
  top: -1%;
  bottom: -1%;
  z-index: -1;

  display: block;
  background-image: url(http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg);
  background-size: cover;
  width: 102%;
  height: 102%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

ps: I also prefer to use content:before, to keep the code cleaner. personal preference, is all.

Defined Edges With CSS3 Filter Blur

You could put it in a <div> with overflow: hidden; and set the <img> to margin: -5px -10px -10px -5px;.

Demo:

Output

CSS

img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}

div {
    overflow: hidden;
}
​

HTML

<div><img src="http://placekitten.com/300" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</div>​​​​​​​​​​​​

---

Related Topics