CSS Prevent box shadow color bleeding

Question

I'm trying to color two adjacent DIV's with box shadows that extend into each others paths. For some reason the box shadow of one of the elements will bleed onto the top of the other div creating an ugly effect.

Here is the current effect: https://imgur.com/Gs3hT5P But I am attempting to make it look like this: https://imgur.com/eBQLGCv

The code for what I have is as follows, keep in mind the expected result is not coded in HTML/CSS so maybe what I'm trying to accomplish is not possible with CSS as it is.

span {
  position: relative;
  display: inline-block;
  background: #fff;
  width: 40px;
  height: 20px;
  margin-right: 7px;
  border-radius: 1px;
}

span:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

span.red {
  box-shadow: 0px 0px 30px 10px #ff0000;
}

span.blue {
  box-shadow: 0px 0px 30px 10px #00ccff;
}

user_4375327 · Answer

A solution is to set the shadows to the before pseudo-elements instead:

span.red::before {
    box-shadow: 0px 0px 30px 10px #ff0000;
}

span.blue::before {
    box-shadow: 0px 0px 30px 10px #00ccff;
}

Since you set their z-index to -1, those pseudo-elements will be behind their parents, i.e. the span elements.

Update: you fixed the HTML, so for information purposes I let what I wrote below.

Also don't forget to close your span elements this way (see HTML5 standard for more details):

CSS Prevent box shadow color bleeding

1 Answers