[[!meta title="Better Box Shadows"]]
[[!meta date="2019-01-08"]]

Box shadow on <abbr title="hypertext markup language">HTML</abbr> elements has been widely supported across most browsers for a while now, but I find the default options don't allow for much visual manipulation of the shadows in general.

Let's take a look at a default configuration of `box-shadow`:


    .box-container {
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }


In the example above the first property number is the origin of the *x-axis*, the second number is the origin of the *y-axis* and the third is the amount of *blur*.

We should also add some minimal styling to cleanup the `.box-container` a little bit for our example:


    <div class="box-container"></div>


    .box-container {
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        /* Styles to make it less ugly */
        background: white;
        border-radius: 10px;
        border: 1px solid #eee;
        height: 200px;
        padding: 10px;
        position: relative;
        width: 250px;
    }


Not bad - but we can do a lot better than this.

## Please sir, I want some more (depth)

We just need to add a simple child `div` (or use a `pseudo` element if you prefer) inside our main element we want to apply the shadow to:


    <div class="box-container">
        <div class="box-container-inner"></div>
    </div>


Now we make our inner child element `absolute` and set it's `height` and `width` dynamically to be slightly smaller than it's parent (percentages work best for this). 

Remember to set this child element behind it's parent by adding `z-index: -1`.


    .box-container {
        /* No box-shadow needed on this element anymore */
        /* Styles to make it less ugly */
        background: white;
        border-radius: 10px;
        border: 1px solid #eee;
        height: 200px;
        padding: 10px;
        position: relative;
        width: 250px;
    }


## Inner Containers

We also need to target the `box-container-inner` element set inside the current parent to reflect our custom shadow styling:


    .box-container-inner {
        bottom: 0;
        /* The box-shadow is added here now */
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        height: 94%;
        left: 3%;
        position: absolute;
        width: 94%;
        z-index: -1;
    }


Which will make the drop-shadow render with a little more realistic depth.


## But wait - there's more!

We could stop now and have a decent drop-shadow that is certainly easier on the eyes - but we can make this even better with one extra property - `filter:blur();`. 

So your final code would look like this:


    .box-container {
        /* Styles to make it less ugly */
        background: white;
        border-radius: 10px;
        border: 1px solid #eee;
        height: 200px;
        padding: 10px;
        position: relative;
        width: 250px;
    }
    
    .box-container-inner {
        bottom: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        filter: blur(6px);
        height: 94%;
        left: 3%;
        position: absolute;
        width: 94%;
        z-index: -1;
    }


Which renders out into a much smoother blend of a drop-shadow, creating a more realistic illusion of depth.


Take a look at all the examples in the [CodePen examples](https://codepen.io/bradleytaunt/pen/dyNbZNj)