Question

I am trying to give a text input a drop-shadow & a inner shadow, using CSS3 and box-shadow, you can see my code here,

.text {
        width:388px;
        line-height:37px; 
        height:37px; 
        box-shadow:inset 0px 4px 4px rgba(193, 209, 230, 0.58), 0px 2px 2px, rgba(255, 255, 255, 0.75);
        border-radius:10px; 
        background:#cdd6e6; 
        border:0 none; 
}

​
​
http://jsfiddle.net/3CBrm/

However my box-shadow rules are just being ignored, what am I doing wrong?

Answer 1

You seem to have an extra ,:

...rgba(193, 209, 230, 0.58), 0px 2px 2px, rgba(255, 255, 255, 0.75);
                                         ^

After this fix, it seems like your shadow is there, but it’s too similar to the background color.

jsFiddle Demo