CSS3 box shadows, tips and examples

  • Flag
  • Nov 20, 2014

One of the nicest properties that you can implement in modern browsers is definitely box-shadow. Using six basic values, you can create awesome things; on this quick review the author plays a little bit with each property and shows 30 different experiments that prove the great things that you can achieve with box-shadow, though the result can only be visualized in Chrome 11 +.

You can browse the different examples using the arrow keys, the CSS for object is contained into a HTML object, which makes easier to stare at every effect.

On the article you will find a complete explanation on the different properties of box-shadow (inset, left, top, blur, size, and color). There’s also a quotation regarding some other properties that were used:

  • :after and :before
  • transition
  • webkit-keyframes
  • text-shadow
  • background-image: gradient

Other points that are discussed on the post include multiple values and cutoff point. Two of the effects that you’re going to find were taken from Nicolas Gallagher and Matt Hamm. The exercise is definitely a nice source of inspiration and despite the fact that it only works on Chrome, we all know how tough is to make CSS3 work perfectly in all browsers.

Check the original article

This a test message in global notification
Your download will start shortly.


Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Thank You!

Your post has been received, and will be reviewed by a curator