Blog

Cross Browser box-shadow

shutterstock_234378844
BLOG / Web Development

Cross Browser box-shadow

Box-shadow is the method of displaying an inner or outer shadow effect to elements.

Browser Support

Box-shadow is already supported by all major browser so it should be really easy to get it working cross browser.

Code Example

You can use Box-shadow like this:

#test {
  width: 100px; height: 100px;
  border: 12px solid blue; background-color: orange;
  border-top-left-radius: 60px 90px;
  border-bottom-right-radius: 60px 90px;
  box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4),
              12px 12px 0px 8px rgba(0,0,0,0.4) inset;
}

More Information

More information can be found here.