shadow

box-shadow

Is used to assign one or more shadows to an element.

Compatibility

  • box-shadow Firefox 4+ Safari 5.1+, Chrome 10+ Internet Exlorer 9+ Opera 11+

Supported by all modern browsers. For detailed compatibility info see caniuse.com.

  • Firefox 4+
  • Safari 5.1+, Chrome 10+
  • Internet Explorer 9+
  • Opera 11+

General description

Multiple shadows can be assigned comma separated.

box-shadow: 1 inset 2 4px 3 4px 4 16px 5 10px 6 #000

  • 1 Optional. When set the shadow is drawn inside the element and will be no drop shadow. When both the offset values are positive the shadow runs from top left to bottom right. When negative it starts at the bottom right corner (not depicted).
  • 2 The horizontal offset of the shadow (x-axis). If positive the shadow is drawn to the right side of the element, if negative it is drawn to the left side.
  • 3 The vertical offset of the shadow (y-axis). If positive the shadow is drawn below the element, if negative it is drawn above.
  • 4Optional. The blur radius defines how big and how much blurred the shadow is. The larger this value, the lighter the shadow. Negative values are not allowed. If not set the shadow’s edges are sharp (which corresponds to a value of 0).
  • 5Optional. The spread distance makes the shadow bigger in all directions. The shadow is expanded by the given value. Negative values cause the shadow to contract (not depicted).
  • 6 The color of the shadow. rgba/hsla color values are possible.
Example
Inspect me!?

Examples

Expanded shadow to the left

box-shadow: 1 -5px 2 5px 3 15px 4 7px 5 #000

  • 1 Horizontally the shadow gets drawn to the left side (minus value).
  • 2 Vertical offset. As it is positive the shadow gets drawn downwards.
  • 3 The blur radius.
  • 4 The spread distance.
  • 5 A black shadow.
Example
Inspect me!?

Inset shadow

box-shadow: 1 inset 2 6px 3 6px 4 12px 5 #000

  • 1 The shadow is inset.
  • 2 Horizontal offset.
  • 3 Vertical offset.
  • 4 The blur radius.
  • 5 A black shadow.
Example
Inspect me!?

Further reading

For more info see the W3C site, the Safari site, the MSDN site and the site at MDN (including compatibility info for older browser versions).

text-shadow

Is used to assign one or more shadows to text.

Compatibility

  • text-shadow Firefox 4+ Safari 5+, Chrome 10+ Internet Exlorer 10+ Opera 11+

Not supported by Internet Explorer prior to version 10. For detailed compatibility info see caniuse.com.

  • Firefox 4+
  • Safari 5+, Chrome 10+
  • Internet Explorer 10+
  • Opera 11+

General description

Multiple shadows can be assigned comma separated.

text-shadow: 1 4px 2 4px 3 14px 4 #969696

  • 1 The horizontal offset of the shadow (x-axis). If positive the shadow is drawn to the right side of the text, if negative it is drawn to the left side.
  • 2 The vertical offset of the shadow (y-axis). If positive the shadow is below the text, if negative it is drawn above.
  • 3Optional. The blur radius defines how big and how much blurred the shadow is. The larger this value, the lighter the shadow. Negative values are not allowed. If not set the shadow’s edges are sharp (which corresponds to a value of 0).
  • 4 The color of the shadow. rgba/hsla color values are possible.
Example
TInspect me!?

Example

Shadow above and to the left

text-shadow: 1 -5px 2 -5px 3 12px 4 #969696

  • 1 Horizontally the shadow gets drawn to the left side (minus value).
  • 2 Vertically the shadow gets drawn top (minus value).
  • 3 The blur radius.
  • 4 A grey shadow.
Example
CSSInspect me!?

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

x The live example can be examined using an element inspector like Firefox’s Firebug. Many browsers already have such an inspector build in. In each case right click on the example and then select “Inspect element”. Now an area in your browser opens where you see the HTML code of the example on the left side and the CSS on the right side for further investigation.
  • http://pmarichal.net Phil

    Great site, very nice looking and very helpful.

    A small note: I think there is a error. In the Text-shadow chapter, in the General description section, the example is “background: 5px 5px 10px #646464″.

    If I’m not mistaken, it should be “text-shadow: 5px 5px 10px #646464″.

    • http://www.css3files.com Christian Krammer

      Thank you very much for the tip! It indeed should mean “text-shadow: 5px 5px 10px #646464″. Stupid copying error. I already corrected the fault.

  • Rafael Dux

    Gracias!! Yo también encuentro útil este sitio!
    El CSS es mi pesadilla, pero aquí está muy bien explicado. Muchas gracias!

    • http://www.css3files.com Christian Krammer

      For the ones, that don`t speak spanish (like me):
      “Thanks! I also find this site useful!
      CSS is my nightmare, but here it is explained very well. Thank you very much!”

      Thank you very much for the compliment.

  • http://tiagofranco.net Tiago Franco

    Brilliantly explained. Thanks for the time and effort you’ve put in this, I’ll definetly use it in the future.

    By the way, just a quick correction: IE9 still doesn’t support text-shadow CSS3 property. :)

  • Armando E. Lopez Jr.

    This really saved me, this effects are great for doing in-depth design. Thank you so much, for real, this was explained SO MUCH EASIER than the others :)

  • Red

    box-shadow

    General description
    …..
    2 The vertical offset of the shadow (y-axis). If positive the shadow is drawn above the element, if negative it is drawn below.
    ….

    is there a typo here?
    I think it should be ” If positive the shadow is drawn below the element, if negative it is drawn above.”

    or it’s just my misunderstanding? my poor english…

    • http://www.css3files.com Christian Krammer

      Thank you very much for the tip! Of course it should mean “If positive the shadow is drawn below the element, if negative it is drawn above.” I have corrected it.

  • http://www.exklusive-standards.de Andreas

    There is a lill fault in your description.
    i even wrote to the w3c css mailinglist… :)

    have a view in the specs:
    http://www.w3.org/TR/css3-background/#the-box-shadow

    it says:
    = inset? && [ {2,4} && ? ]

    so the ‘inset’ keyword, if needed, must come first! Otherwise the validator will not validate the stylesheet!

    • http://www.css3files.com Christian Krammer

      Thanks for the tip, Andreas! I have adapted the description.

      Honestly I didn’t care about the order of the values as long as everything looked fine when testing. But good to know that it actually is important (although I normally don’t care about validating the CSS).

  • http://www.fosterfort.com lalit

    thanks for sharing.This effect really save my time . but ie9 is not correctly showing this effect rather than other browsers.

  • Steph

    Is it possible to add a box shadow of equal distance around each edge?

    Also might it be possible to have it not show on the top side?

    I have a white box (white foreground on top of charcoal background) to start at the top of the site, extend down to the bottom, with a footer below. I want a shadow on the left, right, and bottom edges. And I want the shadow to appear as if you are looking straight at something with equal shadows on all sides.

    • http://www.css3files.com Christian Krammer

      That’s no problem at all. Just set the horizontal and vertical offset to 0 and the blur radius to something bigger than 0.

      box-shadow: 0 0 10px #afafaf

      Unfortunately it’s not possible to spare the top side as far as I know. But since your box starts at the top of the page the top part of the shadow doesn’t get displayed anyway.

    • http://twitter.com/thebabydino Ana

      Actually, it is possible to have a shadow on three sides if you set the blur radius to 0 and you use the offsets and the spread properly. Something like this:
      box-shadow: 0 10px 0 10px #000;

      But then you don’t have equal shadows on all three sides and the shadow doesn’t look much like a shadow anymore, more like a border, as it can be seen in this test of mine (and, in this case, it can be useful for simulating multiple borders.).

  • http://www.indiantrendz.com ajay

    IE9 and IE10 has problem and not work correctly for these effects

    • http://www.css3files.com Christian Krammer

      Which problem do you relate to? Could you be more specific please?

  • jinu

    Christian, you are my master in CSS3 :)

    • http://www.css3files.com Christian Krammer

      You make me blush, jinu. :) Thanks for the compliment.

  • http://www.dinvaders.com/ Laura Moraiti

    I must congratulate you Christian for curating such a helpful site. I used your definition of RGBa colors in one of my blog posts.
    Keep up with this nice work!

    • http://www.css3files.com Christian Krammer

      Thanks Laura! I would be happy if you could share your blog post.

  • droov

    What can I do to become a Web design expert like you? please comment if u get some time

    • http://twitter.com/mettleUnbeaten Nikhil B. S.

      just start doing things….