Photo studio · key, fill, rim · seamless backdrop
CSS Box-Shadow Generator
Drag the lights around the subject. The shadow falls away from each light; a bigger softbox makes it softer, more power makes it darker. Up to three lights become three layered shadows, and the CSS follows.
Light
CSS
A shadow is where the light is not
box-shadow takes an x and y offset, a blur, a spread and a colour: 0 8px 24px rgba(0,0,0,.25) is a soft shadow falling straight down. Reading those numbers is hard; placing a light is easy. On this stage the offset is the direction away from the light, blur is the size of the softbox, opacity is its power, and each extra light adds another comma-separated layer, which is how CSS stacks shadows. Inset turns a light inward for a recessed, pressed-in look.
Reading the studio
A key light above and to one side gives the natural shadow most interfaces use. Bring the fill in opposite at low power and the shadow loses its hard edge; a rim light from below adds a faint upward shadow that lifts the card off the page. Throw is how far the shadow reaches for a given light position, the equivalent of the subject's height above the backdrop.
Why is the shadow moving the wrong way?
It moves away from the light, like a real one. Put the light at the top left and the shadow falls to the bottom right.
Can I use a coloured shadow?
Yes; pick a colour for the current light. Coloured shadows work well at low power, and the Neon preset shows a bright one.
Is anything uploaded?
No. It is CSS generated in your browser.