Shadow not showing up

shadow css
user1869585 picture user1869585 · Dec 8, 2012 · Viewed 54.4k times · Source

I am trying to place shadows in one of the div and it's not showing up. Here is one div where I am trying to implement the shadow:

#intro {
    padding: 0px;
    margin: 0px auto;
    width: 100%;
    float:inherit;
    overflow: hidden;
    height: 800px;
    position:inherit;
    background-color: #00b3e1;; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

Here is the URL: http://rachelchaikof.com/awareness/

Answer

Chris Herbert picture Chris Herbert · Dec 8, 2012

The reason you can't see the shadow is because the next div (#one) is directly below it, and the shadow is rendering beneath #one. Remove the background image from #one and the shadow becomes visible.

Add this to #intro's CSS to make the shadow visible:

position: relative;
z-index: 10;

If you want shadows visible on the other text areas, you'll need to adjust their z-index values as well, with the top element (#intro) having the highest value.

Related questions

How can I add a box-shadow on one side of an element?

I need to create a box-shadow on some block element, but only (for example) on its right side. The way I do it is to wrap the inner element with box-shadow into an outer one with padding-right and overflow:hidden; …

Read More
Inner text shadow with CSS

I am currently playing around with CSS3 and trying to achieve a text effect like this (the black blurry inner shadow): But I cannot find a way to create text shadows inside the text. I wonder whether it is still …

Read More
box-shadow on bootstrap 3 container

I'm building a little website using bootstrap. The base structure looks like this: <!DOCTYPE html> <html> <head> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css" rel="stylesheet"> <…

Read More