box-shadow overridden by div background

css box-shadow examples
box-shadow generator
box-shadow: inset
box-shadow bottom only
box-shadow opacity
box-shadow mdn
box-shadow all sides
webkit-box-shadow

I have some problem with adding shadows to a list of block elements. The Divs in this case have a background-color which overrides the shadow from the div above. To solve this i decrease the z-index on each element, but that is not a valid solution.

How would you solve this issue on a better way in pure html/css? And how would you solve this using Twitter bootstrap?

Here is my test code HTML/CSS

<div class="container" style="z-index:10">
    <h1>Box 1</h1>
 </div>
 <div class="container" style="z-index:5">
    <h1>Box 2</h1>
 </div>
 <div class="container" style="z-index:0">
    <h1>Box 3</h1>
 </div>


h1{margin:0;}
.container{
    background-color: yellow;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
}

Thanks for any help

EDIT: http://jsfiddle.net/42816g0x/5/

Some clarifications: - the shadow needs to be on the div.container

  • the div should be able to have different bg colors, eg every odd div

  • the number of div.container can vary, I don't want to manually add z-index on each

Edit 2: I came up with a solution which I think is the best one, I don't need to manually fiddle with the z-index, (because they are dynamically added through x nr items, varying times to times). Instead I use the pseudo class ::before to add shadow on the top.

.container::before{
    width: 100%;
    height: 5px;
    content:"";
    position: absolute;
    top: 0;
    left:0;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 58%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.34)), color-stop(58%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 58%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 58%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 58%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 58%,rgba(0,0,0,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

jsfiddle

Just add position:relative for the z-index to work for you:

.container{
position:relative;
background-color: yellow;
margin: 0;
padding: 0;
-webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
 }

CSS: Why background-color breaks/removes the box-shadow , CSS: Why background-color breaks/removes the box-shadow? html css. I have a pretty simple div structure - tree boxes with middle box  The box-shadow property attaches one or more shadows to an element. yes. Read about animatable Try it. JavaScript syntax: object .style.boxShadow="10px 20px 30px blue" Try it. Browser Support. The numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit- or -moz- specify the first

Try this. I have made some changes in css and html.

   h1{margin:0;
 -webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
}
.container{
    background-color: yellow;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.75);
}
 <div class="container">
    <h1>Box 1</h1>
    <h1>Box 2</h1>
    <h1>Box 3</h1>
 </div>

CSS Box Shadow, Used in casting shadows off block-level elements (like divs). .shadow protects the inner element from being blurred */ padding: 100px; background-color: #DDD​; } If the vendor extension overrides the original, who cares? Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box. .one-edge-shadow { box-shadow: 0 8px 6px -6px black; } Multiple Borders & More. You can comma separate box-shadow any many times as you like. For instance, this shows two shadows with different positions and different colors on the same

We’ll render the shadow in a pseudoelement (could be either before or after, it doesn’t matter) and assign a negative z-index to it.

.container{ 
  position: relative;
}

.container:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  box-shadow: -5px 5px 20px 5px #000;
}

For more details - Tutorial Here.

A Specificity Battle! (and other trickery), #19 ways to override a background color. Starting with div { background: black; }. There are an of background. div { box-shadow: inset 0 9001rem 0 white; }  CSSmatic is a non-profit project, made by developers for developers. Are you a web developer? Would you like to collaborate on CSSMatic?

Change your css code for this

h1{margin:0;}
.container{
    background-color: yellow;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.75);
}
<div class="container">
    <h1>Box 1</h1>
 </div>
 <div class="container">
    <h1>Box 2</h1>
 </div>
 <div class="container">
    <h1>Box 3</h1>
 </div>

Problem with box shadows using pseudo elements, <div class="box-shadow-preview"> [color=blue]<div .content { overflow: hidden​; /* delete here or override in style.css as shown next */ width: 630px; } .box-​shadow-preview { background-color: #FFFFFF; border-color:  Inner Shadows in CSS: Images, Text and Beyond. On: to throw a box-shadow onto an empty div, but what if you want to place one on an image. the degree of

CSS shadows under adjacent elements, How to solve the problem of CSS shadows under adjacent elements - a short other and applying a box shadow on them may cause the shadow from an static context and elements from these contexts can't be interwoven. The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box. The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box. The blur radius (optional), if set to 0

CSS box-shadow Property, DOCTYPE html> <html> <head> <style> div { width: 150px; height: 50px; background-color: #eee; box-shadow: 5px 4px 10px #1c87c9; -moz-box-shadow: 5px  Disclaimer: I totally stole this from @nrrrdcore (the apple-shadow.css file is from her original gist), this is just a rough translation to SCSS using Compass mixins.

box-shadow, Inset shadows are drawn inside the border (even transparent ones), above the background, but below content. <offset-x> <offset-y>: These are  The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

Comments
  • Exactly, forgot that line in the example. But I want to solve this in a smarter way. the container is computed and not manually written, the z-index is not a good way to add manually. There got to be a better solution.
  • You left out the important info that they are dynamic. Please update your question since it's not possible to guess your code.You can easily use a class for z-index. .z1{z-index:10;} .z2{z-index:5;} .z3{z-index:0;}. See updated fiddle.
  • The shadow should not be on the heading, rather on the div. The div can contain more than just the heading.jsfiddle.net/42816g0x/5
  • There is no difference.