Snippets

Emboss effect with CSS

Apply this class to any block/inline-block element with a background and it will look like it’s embossed.

.embossed {
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
}

Share this snippet

 
  • http://linktube.net Morten

    Thanks! And please, make a part of the code snippet library where us readers can recommend snippets etc.
    Would be a fine asset to your library.

    • http://www.riiich.se/ Riiich

      There’s a like button.