CODEWITHSUNDEEP
htmlcss
user7600596
user7600596

Reputation:

Adding a box-shadow blur to only one side of an element

Is it possible to add a blur to only one side of a div using box-shadow?

What I am trying to achieve is a shadow with no width, just blur on only one side of a div. In my example I try to apply it to the bottom but the side really shouldn't matter.

I tried have using box-shadow: 0px 5px 5px -5px #000000; however using this method the shadow does not cover the whole length on the bottom of the div. 

#bg {
  text-align: center;
  width: 200px;
  height: 200px;
  padding: 50px;
  background: #eeeeee;
}

#box {
  width: 100%;
  height: 100%;
  box-shadow: 0px 5px 5px -5px #000000;
  background: yellow;
}
  
<div id="bg">
  <div id="box"></div>
</div>

Only HTML and CSS solutions please.

Upvotes: 3

Views: 2793

Answers (5)

Dan Hardy
Dan Hardy

Reputation: 26

Try this

#bg {
  text-align: center;
  width: 200px;
  height: 200px;
  padding: 50px;
  background: #eeeeee;
}

#box:after {
  content:'';
  display:block; 
  position:absolute;
  z-index:0;
  bottom:0px;
 background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #9C9C9C),
    color-stop(0.22, #EEEEEE)
);
background-image: -o-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -moz-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -webkit-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -ms-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: linear-gradient(to bottom, #9C9C9C 0%, #EEEEEE 22%);
height:10px;
width:100%;

}

#box {
  width: 100%;
  height: 100%;
  position:relative;
  background: yellow;
}

https://jsfiddle.net/Lfa4z5b4/

Upvotes: 0

Pete
Pete

Reputation: 58432

You could use an after element and stretch it a little:

#bg {
  text-align: center;
  width: 200px;
  height: 200px;
  padding: 50px;
  background: #eeeeee;
}

#box:after {
  content:'';
  display:block; 
  position:absolute;
  z-index:0;
  top:0;
  left:-4px;
  right:-4px;
  bottom:0;
  box-shadow: 0px 5px 5px -5px #000000;
}

#box {
  width: 100%;
  height: 100%;
  position:relative;
  background: yellow;
}
<div id="bg">
  <div id="box"></div>
</div>

Upvotes: 2

dietary-wheevil
dietary-wheevil

Reputation: 4481

There is no readily available way to do precisely what you seek, at least not using a single box-shadow. Remember, the CSS box-shadow property accepts multiple comma-delimited entries, so this is your best bet if you're committed to using them. In the example below, I'm simply using two copies of the same box-shadow value with one difference: I've offset the first horizontally toward the left by 2.5px and the other toward the right by positive 2.5px. Additionally, I've added opacity to the color (due to mitigate the darkening effect of overlapping shadows).

#bg {
  text-align: center;
  width: 200px;
  height: 200px;
  padding: 50px;
  background: #EEE;
}

#box {
  width: 100%;
  height: 100%;
  box-shadow: -2.5px 5px 5px -3px rgba(0, 0, 0, 0.50),
              2.5px 5px 5px -3px rgba(0, 0, 0, 0.5);
  background-color: Yellow;
}
<div id="bg">
  <div id="box"></div>
</div>

Upvotes: 0

Oke Tega
Oke Tega

Reputation: 883

try this for bottom positioned box-shadow

.your_class {
    box-shadow: 0 8px 6px -6px black;
}

You can also read https://developer.mozilla.org/en/docs/Web/CSS/box-shadow to understand how the box-shadow works

Upvotes: 1

Brad Fletcher
Brad Fletcher

Reputation: 3593

#bg {
  text-align: center;
  width: 200px;
  height: 200px;
  padding: 50px;
  background: #eeeeee;
}

#box {
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #ccc;
  background: yellow;
}
  
<div id="bg">
  <div id="box"></div>
</div>

Upvotes: 0

Related Questions