Question

I’m trying to figure out if this is possible with css. I want a square that has a drop shadow. At the bottom of the square, the drop shadow is completely visible. At the top of the square, no drop shadow should be apparent. This would be a gradient so being in between the top and bottom, the drop shadow would be half visible.

Any ideas on how to achieve this?

Answer 1

It is possible to emulate that using a gradient on an absolutely positioned pseudo-element, with a z-index such that it appears underneath its parent element.

HTML:

<div class='e'></div>

CSS:

.e {
    position: relative;
    width: 10em;
    height: 10em;
    margin: 1em;
    background: lemonchiffon;
}
.e:before {
    position: absolute;
    z-index: -1;
    top: 10%; left: 10%;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, navy);
    content: '';
}

If you want the shadow to have a faded edge, then you’ll have to give the pseudo-element an inset shadow (same colour as the background of .e‘s parent).

box-shadow: inset 0 0 .5em .5em white;

Note that this won’t work in IE9 and older. You can use filter gradients for those, but not on pseudo-elements, so what you would have to do in this case would be to add a child to the element (just for IE) and style it just like you style the pseudo-element.

---

EDIT: If you want this to work over an image, gradient background, then I’m afraid it’s a bit trickier and it cannot be done using just CSS in IE9 and older. However, in the current versions of the other browsers, this can be achieved using a linear gradient and three radial gradients.

Relevant CSS:

.e {
    width: 25em; /* give it whatever width and height you like */
    height: 25em;
    /* make padding on right and bottom larger by adding the amount taken by
     * the "shadow"
     */
    padding: 5% 10% 10% 5%;
    box-sizing: border-box;
    /* change navy to red in each of these at one time to see what each
     * gradient covers
     */
    background:radial-gradient(at top right, navy, transparent 70.71%) 0 100%,
        radial-gradient(at top left, navy, transparent 70.71%) 100% 100%,
        radial-gradient(at bottom left, navy, transparent 70.71%) 100% 0,
        linear-gradient(navy, transparent) 50% 100%;
    background-repeat: no-repeat;
    background-size: 95% 95%, 5%, 5%, 5% 95%, 90% 5%;
}