CODEWITHSUNDEEP
htmlcssdropshadow
Lizza
Lizza

Reputation: 2819

How to make a drop shadow go all the way across the edge of a div, not inset

This is a super simple issue that I can't figure out.

I want to have a drop shadow go all the way across the bottom of a div. As it is, it covers most of the bottom:

enter image description here

And here is the code:

box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49)

I need the shadow to go all the way across on both sides.

Thanks

EDIT: Am I going about this wrong? Should I be using some other CSS property?

Upvotes: 5

Views: 4758

Answers (4)

Vladimir Starkov
Vladimir Starkov

Reputation: 19803

The result is:

enter image description here

Demo on dabblet.com

CSS:

div {
    background-color: #FFF;
    border: 1px solid #888;
    width: 100px;
    height: 100px;
    box-shadow: 0px 10px 5px -2px #888 ;
}

Upvotes: 1

timshutes
timshutes

Reputation: 2279

To avoid the top shadow, add vertical offset and adjust your other parameters accordingly. In addition, set the spread distance to be 0 or greater and you'll cover your horizontal border.

Start with this:

box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.49)

If you're not getting the full horizontal border covered, increase the 4th value slightly until it looks good. Adjust your vertical offset accordingly as well if needed.

It would be helpful to see your html / css for the actual box as well.

Upvotes: 2

Martin Schaer
Martin Schaer

Reputation: 4006

There is a solution for that using an extra div, bigger than the original, positioned absolutely. See a working example here: http://jsfiddle.net/martinschaer/MHs5R/

<div class="container">
    <div class="content"></div>
    <div class="shadow"></div>
</div>

And de CSS:

.container{
    position: relative;
    background-color: #f0f0f0;
    padding: 20px;
}

.content{
    height: 200px;
    width: 200px;
    background-color: #fff;
}

.shadow{
    -webkit-box-shadow:  0px 20px 15px -15px rgba(0, 0, 0, 0.49);
    box-shadow:  0px 20px 15px -15px rgba(0, 0, 0, 0.49);
    position: absolute;
    top: 20px; /* .container top padding */
    left: 13.5px; /* 20 - (15/2) = .container left padding - (shadow spread / 2) */
    width: 215px; /* .content width + shadow spread */
    height: 200px;
}​

Upvotes: 2

Ashwin
Ashwin

Reputation: 12411

The box-shadow parameters are in the sequence as below:
horizontal offset, vertical offset, blur distance, spread distance of the shadow, a color value

I think what you need is this box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.49)

Here is the fiddle - http://jsfiddle.net/ashwyn/Cbqej/1/

Upvotes: 1

Related Questions