Soft Edges using CSS?

Question

I am using RGBA to create a transparent background that overlays on top of an image. Works just fine.

My questions is this: Is there a way to "soften" the edges of the box to where it flows more into the picture vs a hard edge?

Here is my CSS for the box:

#past{
    position:absolute;
    left:0;
    top:363px;
    background-color: rgba(34,34,34,0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
    /* For IE 8*/
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
    z-index:10;
    padding:10px;
}

I know I can do this by creating a background image in Photoshop but I was looking for a CSS-only way instead of using an image.

Also, I would prefer—if at all possible—for this to work in all browsers.

score 55 · Accepted Answer · edited May 07 '23 at 18:15

Another option is to use one of my personal favorite CSS tools: box-shadow.

A box shadow is really a drop-shadow on the node. It looks like this:

-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
box-shadow: 1px 2px 3px rgba(0,0,0,.5);

The arguments are:

1px: Horizontal offset of the effect. Positive numbers shift it right, negative left.
2px: Vertical offset of the effect. Positive numbers shift it down, negative up.
3px: The blur effect.  0 means no blur.
color: The color of the shadow.

So, you could leave your current design, and add a box shadow like this:

box-shadow: 0px -2px 2px rgba(34,34,34,0.6);

This should give you a blurry top edge.

This website will help with more information: https://css-tricks.com/snippets/css/css-box-shadow/

Please don't link to w3schools, rather link to mdn https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow — tread, Oct 21 '17 at 15:33

score 5 · Answer 2 · answered Aug 06 '11 at 05:27

It depends on what type of fading you are looking for.

But with shadow and rounded corners you can get a nice result. Rounded corners because the bigger the shadow, the weirder it will look in the edges unless you balance it out with rounded corners.

http://jsfiddle.net/tLu7u/

also.. http://css3pie.com/

score 3 · Answer 3 · edited May 23 '17 at 11:55

3

You can use CSS gradient - although there are not consistent across browsers so You would have to code it for every one

Like that: CSS3 Transparency + Gradient

Gradient should be more transparent on top or on top right corner (depending on capabilities)

edited May 23 '17 at 11:55

Community

1
1

answered Aug 06 '11 at 04:52

Jacek Kaniuk

5,229
26
28

Soft Edges using CSS?

3 Answers3

Linked