Creating an inset dark drop shadow effect with CSS

html css dropshadow
endy picture endy · Jun 14, 2011 · Viewed 9.7k times · Source

I'm trying to get an effect like an inset drop shadow effect in CSS that looks like the following image:

image of sunken button
(source: gyazo.com)

Does any body know how I can get that effect with CSS?

Answer

theozero picture theozero · Aug 5, 2011

The key here is multiple box shadows, a larger darker one inset from the top left and a very subtle shadow below thats slightly brighter than the background.

Notice the form of box-shadow is "x-offset, y-offset, blur, color"

Learn to use the blur amounts and multiple shadows and you can make some really nice effects.

Example style (for display on a background of #222):

.button {
    display:inline-block;
    padding: 10px 15px;
    color: white;
    border-radius: 20px;
    box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333;
}

Related questions

Drop shadow on a div container?

I have a searchbox with auto-suggest that pops a div up underneath it with multiple search string suggestions (like google). Is it possible to have drop shadow on the auto-suggest box with CSS or will I need a script of …

Read More
css3 drop shadow under another div, z-index not working

i'm trying to use a drop shadow to make it look like one div (the header) is "above" another. my problem is that the "middle" div is covering the drop shadow. i tried using z-index to put the header div …

Read More
CSS Speech Bubble with Box Shadow

Creating a DIV that uses CSS to draw a triangle to the left. Trying to apply a uniform box-shadow to both parent and the pseudo element (see images) and code. Is this possible? Or am I better off using border-image …

Read More