Grow your CSS skills. Land your dream job.

Last updated on:

Top Shadow

Shadow along the top edge of the website, like this:

body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;

          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
              -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
                         box-shadow: 0px 0px 10px rgba(0,0,0,.8);

          z-index: 100;
}

Reference URL

Comments

  1. Permalink to comment#

    yeah, but browser slow down if use position:fixed on site with content. maybe you know reason?

    • I did some testing with that and didn’t seem to find any slowdown. Do you have a test page showing the problem?

    • Permalink to comment#

      No, i try add code in my site with other content & get slowdown, i think code with position: fixed; work fine if is demo page with no-content )) in real sites it slow.

    • With content, with scrolling: http://jsbin.com/ejora3

      No slowdown.

      What matters is doing tests. Make a test page with different content that DOES slow it down, and we can troubleshoot from there.

      “Reduced Test Cases” http://css-tricks.com/reduced-test-cases/

    • Permalink to comment#

      Go to my home page please, you see. With other skins for cms it works fine.

    • Scrolls fine for me. If it doesn’t for you, that means it’s either 1) the browser/version 2) the platform/version 3) your computer in general and all of that in conjunction with the HTML/CSS/JavaScript on your page. That’s the point of the reduced test case. Add the top shadow, experience slowness, remove things from the page slowly until it fixes the problem, then that was the thing that was causing the problem. Or do it in reverse, add the top shadow, then add things back into an otherwise empty page until it breaks. The last thing you added is the problem.

    • Permalink to comment#

      I use different browsers for testing on machine with 1GB of memory & Win-x64. Opera -11 (very-very slow), Safary (no smooth scrolling) =( Thanks for any way. Thanks anyway. I’ll try to find the cause.

    • Permalink to comment#

      I’ve found. lot of text-shadow on my site for any text. Sorry, it is my fault

    • adarsh
      Permalink to comment#

      even mine slowed down i use firefox latest version but in opera its super fast

  2. It works damn fine at my side should i use it or not

  3. If I wanted to do the same type of shadow but coming up from a full-width , what would the change be?

  4. Is there an easy way to accomplish on the bottom side as well? Love the effect.

    • DogsGhost
      Permalink to comment#

      If you want it at the bottom of the page -

      body:after {
      content: “”;
      position: fixed;
      bottom: -10px;
      left: 0;
      width: 100%;
      height: 10px;

      -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
      -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
      box-shadow: 0px 0px 10px rgba(0,0,0,.8);

      z-index: 100;
      }

  5. Hey, thank you very much for that trick! I love it (and use it until now).

  6. Nicely done! I like this.

  7. Permalink to comment#

    This is a very nice resource, i will use it as soon :)

  8. Great work,

    thx it works perfectly.

    wise

  9. Paul
    Permalink to comment#

    Hi Chris

    Great job ( as usual.)

    One small but important question though.

    When browsers ( that support box-shadow property ) render the shadow, it automatically draw the shadow pixel by pixel and then repeat it, and the same in the case of text-shadow too.

    Am I correct ?

    If so, in the exact same setting, a page with many elements styled with shadow-thingy will render slower than a page without those shadows.

    The time taken to render those shadow will not be that much different, unless it gets to a certain point ( which vary by RAM/ browsers and a few others )

    Am I correct ?

  10. I would even to this to make the left and right edges of the shadow go all the way to the end rather than drop off slightly.

    body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: -10px;
    width: 110%;
    height: 10px;

    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);

    z-index: 100;
    }

    Not totally noticeable but just one of those pixel perfect things.

  11. I had seen this here: http://playground.genelocklin.com/depth/

    And im still unsure as to how they make it work on IE7 – IE8, any ideas ?

    • Mark Massengale
      Permalink to comment#

      I got it to work by adding this Browser checking php code, and some conditional statements to check if IE is being used. In the case of IE, I have the code add a for the shadow as the first element inside the tag, and style it from there using a transparent div. An ugly solution to be sure..

    • Mark Massengale
      Permalink to comment#

      D’oh; typos – and I forgot that certain tags get stripped out of comments. It should read: “In the case of IE, I have the code add a tag as the first element inside the tag, and style it from there using a 1px by 10px transparent .png file with repeat-x applied”

    • Mark Massengale
      Permalink to comment#

      Wow – even with the tags spaced out, they still get stripped..ok…well, no less-than signs from now on:
      “In the case of IE, I have the code add a [div] tag as the first element inside the [body] tag, and style it from there using a 1px by 10px transparent .png file with repeat-x applied”

  12. Homer
    Permalink to comment#

    Thank you very much for this awesome solution to value up the feeling without spending too much space for effects.

  13. Gustavo
    Permalink to comment#

    Hello, Friends!

    This topic helped me when I cast a shadow on an element with position: fixed, like the google forum (http://groups.google.com/a/gcoogleproductforums.com/forum/#!overview).

    A hug from a Brazilian friend!

  14. CraigP

    I have a header set at 1024 and moves to centre of page depending on width of browser.

    How would you centre the drop shadow. at a fixed width of 1024?

  15. Permalink to comment#

    I found that it works better if you are viewing it from a host and not your actual computer. I had a document saved on my computer and viewed it and it would lag, then I had it on a host and it didn’t lag, or at least a noticeable lag. It’s good to have a slow computer handy to test web pages on, slower then what the majority of people have today.

    • Permalink to comment#

      I’m not quite sure how to explain this, it may be the computer I was testing on but it works faster from a host.

  16. Permalink to comment#

    What a beautiful, yet subtle, effect. Using this one on a school project right now and I’ll be saving this little gem for a couple more down the road.

    Thank you very much!

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".