How to feather the edges of an image using CSS

Question

I have an unordered list containing 3 list items. Each list item has an image, and 3 divs containing text. I want the edges of the image to be feathered, by using only CSS.

My site found here currenly has a feathered effect by using the following html for the image. However it seems to make the whole image feathered, instead I only need the very EDGES to be strong feathered, and then become less feathered as it spans approx. 50px towards the center on all sides of the image.

HTML:

<p class="vignette"><img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg" alt="" /></p>

CSS:

p.vignette {
  position: relative;
}

p.vignette img {
 display: block;
 width:80%;
margin-left:auto;
margin-right:auto;
 margin-top:6%;

}

p.vignette:after {
 -moz-box-shadow: inset 0 0 180px #defeec;
 -webkit-box-shadow: inset 0 0 180px #defeec;
 box-shadow: inset 0 0 180px #defeec;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
 content: "";
}

You can see I'm using an inset box shadow of 180px but this makes the whole image feathered slightly, and if I use say 50px it is barely noticeable at all! How do I make just the edges strongly and then fading into weaker towards the center?

Thank you!

this might help you http://stackoverflow.com/questions/6964794/soft-edges-using-css — Manjunath Siddappa, Oct 29 '14 at 19:37

score 4 · Accepted Answer · edited Jan 20 '20 at 12:46

4

You need to change some stuff around to get this to work. First, take inline-block off the <a class='divLink'> tag. Then try the following:

.vignette {
    width: 80%;
    margin: 1em auto;
    box-shadow: 50px 50px 113px #defeec inset,-50px -50px 110px #defeec inset;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
}

Then use the following html (and scrap the <img> tag)

<p class="vignette" style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg);"></p>

Of course, you could also put the background-image rule inside the css block, but sometimes declaring a background image inline makes a lot more sense, especially if you expect to have a number of photographs or similar.

edited Jan 20 '20 at 12:46

Martin

22,212
11
70
132

answered Oct 29 '14 at 19:19

JakeParis

11,056
3
42
65

Thanks Jake, I think I've applied what you've said correctly, however the green boxes now appear to have a green border AROUND them. I need the image edges to bleed into the color of the box surrounding it. I've linked to a perfect example below, where you can see the photo's edges bleed into the beige color around it. That's what I need done but the edges need to be green, like the list item box. The second link is my demo site with your changes applied. Thanks for any feedback! http://testsite24.byethost17.com/temp/screenshot.png http://testsite24.byethost17.com/temp/index.html – Nova Oct 30 '14 at 14:13
The fiddle is showing me a feather effect across the entire image, not just the borders though? That house should be clear and it's edges should bleed into the green... perhaps I'm missing something? – Nova Oct 30 '14 at 16:00
@Nova Right, you need to adjust the 50px values that are set on the box-shadow rule. Make them smaller for less fade, larger for more fade. See: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow – JakeParis Oct 30 '14 at 17:44
@Nova Take off the `margin-right:50%;margin-left:50%;` and replace it with `margin-left:auto;margin-right:auto;` or `margin: 0 auto;` – JakeParis Oct 31 '14 at 12:34
@Nova Also, you can add as many of the `box-shadows` as necessary to get the fades where you want them. just separate them with commas like: `box-shadow:x y blur color, x y blur color, x y blur color` etc. – JakeParis Oct 31 '14 at 12:37
Awesome Jake, thanks for the detailed support! Take care – Nova Oct 31 '14 at 14:31

score 0 · Answer 2 · edited Jan 20 '20 at 12:45

0

Create a div that would go inside vignette, and call it fade. It must go above the img though.

.fade {
        height: 100%;
        width: 100%;
        position:absolute;
        background: -webkit-linear-gradient(left, 
                    rgba(0,0,0,0.65) 0%, 
                    rgba(0,0,0,0) 20%,
                    rgba(0,0,0,0) 80%,
                    rgba(0,0,0,0.65) 100%
        );
    }

<p class="vignette">
        <div class="fade"></div>
        <img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg" alt="" />
    </p>

edited Jan 20 '20 at 12:45

Martin

22,212
11
70
132

answered Oct 29 '14 at 18:58

eclipsis

1,541
3
20
56

Thanks for the quick comments! Eric, how exactly do I apply a class to another? Do I simply do this in the css? p.vignette fade{ background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.65) 100% ); } – Nova Oct 29 '14 at 19:01
By altering your HTML: `
`
– eclipsis Oct 29 '14 at 19:03
No, you want `
`
– JakeParis Oct 29 '14 at 19:05
Ok, I now have the html:
and added the class p.vignette fade beneath the previous vignette code, but it doesn't seem to change anything. The result can be seen in my demo link above. – Nova Oct 29 '14 at 19:06
Making a few edits to my answer, I'll post it shortly. – eclipsis Oct 29 '14 at 19:11
The updated answer has you creating a div that would sit above the image and create the effect. `vignette` already has `position: relative` so you're good there. – eclipsis Oct 29 '14 at 19:17
I've applied the changes you made, and assuming the css ".fade" should actually be "p.vignette fade" because it's within the vignette class, I think I've done what you said. However, this has only stretched my image and there's no feathering effect visible. If you view the source of my demo page above, perhaps you'll see something wrong in the HTML or CSS. I'm at a loss... – Nova Oct 29 '14 at 19:47

How to feather the edges of an image using CSS

2 Answers2

Linked