Question

I want to Create Box shadow as given below.

As per my study of Box shadow. It takes below parameters:

DIV {
box-shadow: <horizontal> <vertical> <blur> <color> [inset]
}

Please, Find the jsfiddle for this.

To create above examples, I need to use box shadow.

For example 1, I used below style:

 box-shadow:0px 10px 22px 0px gray;

Here, I am getting lighter shadow on top, left and right side also (which I don’t want)

In example 2, I used below style:

 box-shadow:10px 10px 22px 0px gray inset;

I don’t want inner shading to right and bottom part.

Is it possible to remove unnecessary shading in box-shadow ?

Answer 1

You can have a box shadow just on one side, on two sides, three sides, but in that case you should set the blur value to zero – see demo http://dabblet.com/gist/1579740

However, you can emulate the first kind of shadow by wrapping your div into another outer div of the same width, but slightly bigger height on which you set overflow: hidden;

If you don’t need the background of your div to be semitransparent, then you could also emulate the second one using an absolutely positioned pseudo-element in order to obscure the bottom and right shadows.

DEMO http://dabblet.com/gist/3149980

HTML for first shadow:

<div class="outer">
    <div class="shadow1"></div>
</div>

CSS for first shadow

div {
    width: 100px;
    height: 100px;
}
.outer {
    padding-bottom: 35px;
    overflow: hidden;
}
.shadow1 {
    box-shadow: 0px 10px 22px 0px gray;
    background: #f0f0f0;
}

---

HTML for second shadow

<div class="shadow2"></div>

CSS for second shadow

.shadow2 {
    box-shadow:10px 10px 22px 0px gray inset;
    position: relative;
    background: #f0f0f0;
}
.shadow2:before {
    top: 22px;
    bottom:0;
    left:22px;
    right:0;
    position: absolute;
    background: #f0f0f0;
    content:'';
}