Box-Shadow on the left side of the element only

Css

Css Problem Overview


I have been having trouble setting a box shadow on the left side of an element only.

I tried this:

.box {
    box-shadow: -10px 0px 3px 0px #aaa;
}

<div class="box">Example element</div>

However, the box shadow looks more like a grey line and lacks the regular shadow-effect that I am used to when using box-shadow. Also, the above example includes a small top box-shadow that I am trying to get rid of.

Css Solutions


Solution 1 - Css

You probably need more blur and a little less spread.

box-shadow: -10px 0px 10px 1px #aaaaaa;

Try messing around with the box shadow generator here http://css3generator.com/ until you get your desired effect.

Solution 2 - Css

This question is very, very, very old, but as a trick in the future, I recommend something like this:

.element{
    box-shadow: 0px 0px 10px #232931;
}
.container{
    height: 100px;
    width: 100px;
    overflow: hidden;
}

Basically, you have a box shadow and then wrapping the element in a div with its overflow set to hidden. You'll need to adjust the height, width, and even padding of the div to only show the left box shadow, but it works. See here for an example If you look at the example, you can see how there's no other shadows, but only a black left shadow. Edit: this is a retake of the same screen shot, in case some one thinks that I just cropped out the right. You can find it here

Solution 3 - Css

box-shadow: inset 10px 0 0 0 red;

Solution 4 - Css

box-shadow: -15px 0px 17px -7px rgba(0,0,0,0.75);

Explanation:

The first px value is the "Horizontal Length" set to -15px to position the shadow towards the left, the next px value is set to 0 so the shadow top and bottom is centred to minimise the top and bottom shadow.

The third value(17px) is known as the blur radius. The higher the number, the more blurred the shadow will be. And then last px value -7px is The spread radius, a positive value increases the size of the shadow, a negative value decreases the size of the shadow, at -7px it keeps the shadow from appearing above and below the item.

reference: CSS Box Shadow Property

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAnchovyLegendView Question on Stackoverflow
Solution 1 - CssGregg BView Answer on Stackoverflow
Solution 2 - CssAd CharityView Answer on Stackoverflow
Solution 3 - CssFranciscoView Answer on Stackoverflow
Solution 4 - CssMessage AkunnaView Answer on Stackoverflow