Web Development➝Pure CSS lifted corners shadow effect

Popping up all over the place recently I've been seeing the "lifted corners" effect. You've probably seen it too, something like this:

This is exactly the effect we're going to create, just with CSS, no images. I've seen other solutions to this which use multiple shadows and css transforms to rotate them into position, for example here. The solution I present here I consider to be much simpler and offers a nicer, more well defined, appearance to the curved shadow (as you can see above, or in the live demo below).

The basic idea is to draw a css box-shadow, then use a radial-gradient to hide part of the shadow. Let's see how.

You may already have a box, with it's own styles, to which you want to apply your shadow. If so you can skip to the magic below. Otherwise, for completeness, let's create the box in our html...

<div class="box lifted-corners">
    Look, it's a box that looks like it's got lifted corners!
    It's all an illusion though, it's just the shadow that's curved.
</div>

...and let's just add a few neutral styles to it, these can be whatever you want to match your own theme. I'll also gave it a width here, but you can just leave it to scale with it's container if that works for your site.

html {
    background-color: rgb(180, 180, 180);
}

.box {
    padding: 20px;
    border: solid 1px #555;
    background-color: #eed;
    width: 260px;
}

The important thing to note here is the colour of your background, here I'm using rgb(180, 180, 180) applied to the whole html element. Your set up will obviously be slightly different.

Now the magic, let's add the styles for the box-shadow and the radial-gradient.

.lifted-corners {
    box-shadow: 0px 10px 8px rgba(0,0,0,0.6);
    position: relative;
}

.lifted-corners:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 20px;
    bottom: -20px;
    left: 0px;
    background-image: radial-gradient(
        center bottom, 
        ellipse farthest-side, 
        rgb(180, 180, 180) 80%, 
        rgba(180, 180, 180, 0) 100%
    );
}

The box shadow is applied with an offset of 10px downwards and a spread of 8px. I choose 8px as it's a little under 10px and ensures you don't have little bits of shadow peeping too far out the bottom, ruining the effect.

The second css rule here creates a pseudo element after the box to house our radial gradient. We position this pseudo element directly below our box, make it the same width as the box and high enough to cover all the shadow. Inside this pseudo element we create a background radial gradient, we want it to be the top half of an ellipse with solid background color rgb(180, 180, 180) out to about 80% radius, then fading to a zero alpha value of the same colour rgba(180, 180, 180, 0) out at 100%. The radial gradient softly masks the shadow behind producing the curved shadow effect.

Here's the code in action, if your browser supports it:

Don't forget to add the necessary vendor prefixes (yuk!) to those css3 styles not yet standardised if you wish to use this code. Note, this method will degrade gracefully for those browsers that don't support either radial gradients or box shadows.

The one downside to this approach is you have to explicitly specify your background colour in the definition of the .lifted-corners class. To make it truly portable we need to remove this restriction. It would be nice to be able to apply the radial gradient as a css mask, however it seems as though a mask cannot be applied outside the bounds of the element so we cannot mask the shadow—in fact, when we apply a mask, the shadow disappears completely.