Shadow Workshop

One box-shadow looks like a smudge. Real shadows are several stacked on top of each other — a tight dark one near the edge, a wide faint one far out. Stack layers here, drag the light around the scene, and take the CSS with you.

3 layers
1 layer · same ink
drag anywhere to move the light · or tab to the dot, then arrows

The scene it sits on

Card tone
Shadow tint

A shadow is just darkness added to whatever is behind it. Slide the background down toward black and watch it disappear.

The CSS 


        

          
          
        

        

      


    


    


      

        
Realistic elevation

        

          
          
          
          
          
        

        
Five heights, each built from three layers: a tight one that draws the edge,
          a middle one, and a wide faint one pulled in with negative spread. Higher up means
          softer and further, not darker.

        
Or start from a feel

        

          
          
          
          
          
        

      


      

        
Layer stack 

        

        

          
          
        

        
        
The first layer in the list paints on top. Each row shows that layer
          on its own — the trick is that none of them look like much alone.

      


      

        
Editing layer 1


        

          
0px

          
        

        

          
2px

          
        

        

          
3px

          
        

        

          
0px

          
        

        

          
9%