Search code examples
csseffectborder

CSS: What's a good way to create a raised box effect?

That is, the left and bottom borders of the element need to give a 3d effect of it popping out. Is there a good, purely-CSS way to accomplish this effect?

Solution

  • I found this question while trying to figure this out as well, and I think what you're looking for is something like this http://jsfiddle.net/9Lt2477w/.

    .raisedbox { 
    padding: 10px;
    border: 1px solid #77aaff;
    box-shadow:  -1px 1px #77aaff,
         -2px 2px #77aaff,
         -3px 3px #77aaff,
         -4px 4px #77aaff,
         -5px 5px #77aaff;
}

    Thanks to http://sam-morrow.com/playground/css-cubes.py for the help here. I didn't realize you could just keep adding additional lines into the box-shadow property.