Dropshadow with css

Question

I want to add a transparent dropshadow to my div. I have a container, and behind it I want to place a dropshadow. I don't want the dropshadow to have a color. This is what I have so far:

.content_right1{

    background:#fff;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
     border-radius:10px;

    -moz-box-shadow: 5px 5px 5px #99CCFF;
    -webkit-box-shadow: 5px 5px 5px #99CCFF ;
     box-shadow: 5px 5px 5px #99CCFF;

    /* other styles of the class */
    width:380px;
    float:left;

    margin-left:3px;
    padding:15px;

    min-height:450px;
    margin-left:15px;
}

I want to add the opacity, but when I do the opacity of the whole div changes.

Out of curiosity, how can a dropshadow not have any colour? Do you mean monochromatic (black/white only)? It not, do you have an example of the effect? — Pat, Oct 02 '11 at 14:56
You want a non-coloured drop-shadow? If it has no colour it won't be seen, so...could you explain, a little more clearly, what you want? And what's wrong with your current code? — David Thomas, Oct 02 '11 at 14:57
The `opacity` style property is meant to affect the opacity of the element(s) it's applied to, not an effect applied to the element. — Jared Farrish, Oct 02 '11 at 14:57

score 42 · Answer 1 · answered Oct 02 '11 at 16:17

42

If you want a dropshadow with a level of opacity, you should use rgba() for its shadow color :

http://css-tricks.com/2151-rgba-browser-support/

edit:

-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
box-shadow:5px 5px 5px rgba(0,0,0,0.3);

answered Oct 02 '11 at 16:17

Darklg

593
3
5

1

drop-shadow != box-shadow – Streching my competence Jun 19 '18 at 09:37

Jared Farrish · Answer 2 · 2011-10-02T15:15:37.247

While your question is ultimately a little opaque (pun intended), does the following do what you are expecting?

-moz-box-shadow: 5px 5px 5px #dddddd;
-webkit-box-shadow: 5px 5px 5px #dddddd;
box-shadow: 5px 5px 5px #dddddd;

http://jsfiddle.net/zCTC8/2/

All I essentially did was adjust the color value of the shadow, which is the last value in the declaration (#dddddd, or #ddd). These are hex values. See here for more examples:

http://html-color-codes.com/

#ddd/#dddddd represents a light grey color; #eee is lighter, #ccc is darker, #fff is white, and #000 is black. The value #000 represents RGB, with valid values of 0-9A-F (dark->light), so that:

#f00 = red (R)
#0f0 = green (G)
#00f = blue (B)

The value #99CCFF from your question is equivalent to #9CF, which gives a middle red (9), a light green (C), and white (F). The mix of these values gives you the light blue shade you were seeing, which is why you were getting a color instead of a "shadow-like" color (gray shade).

My color theory is a little rusty here, so anyone correct me if I've flubbed something.

Dropshadow with css

2 Answers2