CODEWITHSUNDEEP
shadowcss
user1869585
user1869585

Reputation: 675

Shadow not showing up

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);
}

Upvotes: 61

Views: 120207

Answers (3)

Cheon
Cheon

Reputation: 89

For anyone that could have the same problem as me.

I wanted a box-shadow when the input is :focus-visible. My input was inside a div with overflow: hidden tho. This will hide your box-shadow depending on how you set it.

Upvotes: 0

Pavithra Olety
Pavithra Olety

Reputation: 88

Another scenario which I had today. Box-shadow was not showing up in spite of setting position relative to the div. Apparently there was no content next to this div which had box shadow.

Once the content was added, box-shadow showed up.

Upvotes: 1

Chris Herbert
Chris Herbert

Reputation: 6305

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.

Upvotes: 210

Related Questions