Salva de la Puente

Hacks & thoughts

Shrinking shadows

Using a negative spread radius value you can imitate the shadow of a bent paper.

I'm a big fan of negative values in CSS properties. They remind me of thinking out the box from time to time. This is one of those times.

Just using a negative length in the spread-radius value of the box-shadow CSS property you can make the shadow to shrink. The negative radius, in addition to high blur values and a soft, almost transparent grey creates this subtle bending paper effect.

  #test {
    width: 90%;
    height: 300px;
    box-shadow: 0 45px 30px -46px rgba(128,128,128, 0.8),
                0 0 40px 0 rgba(200,200,200,0.2);
    margin: 2rem auto;
    background-image: url('');
    background-size: 90% 90%;
    background-repeat: no-repeat;
    background-position: center;

I used this trick to frame talks and sponsors in the Web Games Day site.