Form · T-10
Shadow generator
A single shadow often looks like a grey smudge. Kleurstaal stacks a few, each twice as far and as soft, the way real light falls. You see straight away how it looks on light and on dark.
Your files stay on your device
Questions
Good to know
Why several layers?
Real shadows are sharp close to the object and fade further away. A few layers, each twice as far and as soft, imitate that. A single layer looks flat.
Why shadows instead of borders?
A shadow shows what lies above the page and what is pressed into it, without lines that make the picture busier. All nealvdv sites work this way: lifted to click, pressed in where you type.
Is a shadow enough to recognise a button?
Not always. For accessibility a button must also be recognisable without a shadow, through its text, shape or colour. Use the shadow as an extra, not as the only sign.
How it works
Shadow generator in three steps
Start from a preset
Soft, floating, lifted or pressed. Or set the distance, blur and strength yourself.
Look at light and dark
A light page on the left, a dark one on the right. On dark the shadow becomes black and stronger, or you wouldn’t see it.
Copy the CSS
As a variable, with a dark version for people who use dark mode.