Skip to main content
Back to Colors generators

Colors

CSS Box Shadow Generator

Used by developers, writers, and creators worldwide.

A CSS box-shadow generator produces ready-to-paste box-shadow declarations, from a barely-there subtle lift to a dramatic, layered elevation. Shadows are what give a flat interface depth — cards, buttons, modals, and dropdowns all rely on them — but dialling in the right offset, blur, and opacity by hand is fiddly. Pick a depth and the tool returns a complete, balanced box-shadow value using sensible offsets and low-opacity black, which is the secret to shadows that look natural rather than heavy. The layered option stacks two shadows for the soft, realistic depth modern design systems favour. Generate one, copy the declaration, and drop it straight into your stylesheet.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  1. Choose a depth, from subtle to strong or layered, or leave it on random.
  2. Click Generate to produce a complete box-shadow declaration.
  3. Copy the CSS and paste it onto your element's style.
  4. Generate again to compare a few options before settling.

Use Cases

  • •Adding depth to cards, buttons, and modals
  • •Building an elevation scale for a design system
  • •Quickly prototyping shadow styles without manual tweaking
  • •Learning how offset, blur, and opacity combine in a shadow
  • •Consistent shadow values across a UI

Tips

  • →Keep shadow opacity low for a natural look — heavy black shadows read as artificial.
  • →Use a consistent elevation scale so higher elements cast larger shadows.
  • →Layered shadows give the most realistic depth for floating elements.
  • →Match the shadow strength to the element's importance and how far it floats.

FAQ

what makes a box shadow look natural

Natural shadows use a small vertical offset, a generous blur, and low-opacity black rather than a solid grey. Real light casts soft, subtle shadows, so keeping the opacity low — often under 0.2 — is the key to a shadow that adds depth without looking heavy.

what is a layered box shadow

A layered shadow stacks two or more box-shadow values in one declaration — typically a tight, faint shadow plus a softer, larger one. The combination mimics how real objects cast both a close contact shadow and a broader ambient one, giving a more realistic sense of elevation.

can i use these shadows on any element

Yes — box-shadow applies to almost any element. Use subtle shadows for resting cards and buttons, and stronger or layered shadows for elements that float above the page, such as modals, popovers, and dropdowns.