Multiple CSS shadows? I had no idea!

Well it’s true that you learn something everyday!  I truly thought I had mastered the art of the CSS shadow.  We have the traditional box-shadow, the extremely helpful text-shadow, and of course all of their vendor prefixed counter parts for those browsers that haven’t quite caught up yet.  So if you didn’t know a traditional text or box shadow in css might look like this.

box-shadow: 2px 2px 10px #666;

That’ll give the object your styling a shadow that is 2 pixels down, 2 pixels right, 10 pixels of blur or smoothness (it’s the part that makes it look realistic), and a medium gray colored shadow.  What I didn’t know is you can take it a step further.

box-shadow: 20px -15px 30px red, -20px 15px 30px lime, -20px -15px 30px blue, 20px 15px 30px yellow ;

That will apply a crazy rainbow shadow. Do as many as you would like! Just place a comma after the first shadow and start another. Feel free to choose any color you want!  I feel like that should be published in more places as I’ve been doing box and text shadows for a long time and no one shared that with me until today!

Just FYI… if you’re on my portfolio right now reading this then you should know I’m using text shadows on the text text.. and even though its the text-shadow property and I’ve actually made it a highlight so the text looks inset.  I’m also using a box shadow at the very bottom.  As Bill Nye would say, “Now you know!”

Posted: July 3rd, 2011
Categories: CSS
Comments: No Comments.