Angled drop-shadow with a gradient css

Question

Is there anyway to do a box-shadow with a gradient? I've come this far: http://jsbin.com/qelag/1 (example webkit only atm)

What I am trying to achieve is this: https://dl.dropboxusercontent.com/u/50369398/angled-box-shadow-with-gradient.PNG

So is there anyway to make the shadow in a graduated color?

-Daniel

Answer 1

You could achieve this with layering some borders, but it's a little easier if you do it with transforms / background gradients. Here's a class that can travel well (I just set it up for webkit now, but you can mod easily).

.container {
    width:450px;
    height:150px;
    background: grey;
    border-radius: 2px;
}

.container:after {
    display: block;
    content:"";
    width: 450px;
    height: 150px;
    position: absolute;
    z-index: -1;
    top: 150px;
    background: linear-gradient(170deg, pink, transparent 40%);
    -webkit-transform-origin: 0 0 0;
    -webkit-transform: skewX(50deg) rotateX(75deg);
}

And in the fiddle: http://jsfiddle.net/jaaLx/