Why it matters
Real shadows are soft near the object and fade out gradually, which one CSS shadow can't do. Stacking several light shadows, each twice the size of the last, gives the natural depth you see in polished interfaces, but it's tedious to write by hand.
Gradients have their own problem: blending two bright colours in standard sRGB often passes through a dull grey middle. Modern CSS can blend in OKLab or OKLCH instead, which keeps colours vivid. This builder writes both versions, so older browsers still get a gradient.
How to use it
- Choose Box shadow or Gradient.
- Start from a preset, then adjust the layers or colour stops.
- Change the card and page colours to match your design.
- Copy or download the CSS.
FAQ
Why use several shadow layers?
Each layer adds a little depth at a different distance, which looks like real light. One large shadow tends to look like a grey smudge.
What does OKLCH blending do?
It mixes colours the way people see them, so a blue to green gradient stays bright in the middle instead of going muddy.
Will the gradient work in older browsers?
Yes. The CSS has a standard line first and the OKLab or OKLCH line second; browsers that don't understand the second keep the first.
Can I use the keyboard?
Yes. Every slider has a number box next to it, and the tabs work with the arrow keys.
