Fixed Page Top Shadow With CSS

  • follow us in feedly
Published May 22, 2013 by Brad Knutson
CSS Top Shadow

A fixed top shadow on a page is something I’ve come to take for granted. I use it on nearly every one of my websites without even giving it a second thought. I really like how the effect looks.

A reader recently contacted me and asked how I accomplish this effect on my site. The shadow is subtle and barely noticeable. It’s fixed to the top of the page, regardless of the page is scrollable or not. It spans the entire width of the page.

You can see the demo on this very page, or take a look at the below demo which is a little easier to see.

CSS Top Shadow

View Demo

The effect is actually rather easy to accomplish. We’ll utilize the :before pseudo class. Enter the below CSS into your stylesheet.

body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: -10px;
    width: 110%;
    height: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    z-index: 999;
}

That’s all there is to it. You can change the spread, intensity and color of the shadow by modifying the box shadow above.

What about a fixed shadow at the bottom of the page? We can do both! This time, we’ll use the :after pseudo class.

body:after {
    content: "";
    position: fixed;
    bottom: -10px;
    left: -10px;
    width: 110%;
    height: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    z-index: 999;
}

So there it is. Short post today. Leave a comment below if you have any questions!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

One thought on “Fixed Page Top Shadow With CSS

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">