Advertisement
← All Tools
Free · no sign-up

Box Shadow & Border Radius Generator

Stack CSS box-shadow layers and set border-radius with a live preview, then copy the CSS.

  1. Adjust offset, blur, spread and colour
  2. Add more shadow layers if needed
  3. Copy the generated CSS
Layer 1
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.25);

Frequently asked questions

Can I stack multiple box-shadow layers?
Yes — add as many shadow layers as you like, each with its own offset, blur, spread and colour, and the generator combines them into a single comma-separated box-shadow value.
What's the difference between blur and spread?
Blur controls how soft/feathered the shadow edge is; spread expands or contracts the shadow's size before the blur is applied. Higher spread with low blur gives a sharp-edged glow; higher blur softens it.
Does it also generate border-radius values?
Yes — you can set border-radius per corner alongside the shadow layers, with the live preview showing both together, then copy the combined CSS.
Is anything I design here saved or sent to a server?
No. The preview and generated CSS are computed entirely in your browser — nothing is uploaded or stored. No account is required.
Do I need to install anything or sign up?
No. It runs entirely in your browser — no software install, no account, no email required.
Advertisement
Advertisement