consolelog.tools

Box Shadow Generator

Design CSS box-shadows three ways — stack manual layers, auto-generate smooth light-source shadows, or craft soft-UI neumorphism. Live contextual preview, a curated gallery, and copy-ready CSS, SCSS, and Tailwind v3 / v4 output.

About this ToolHow it works, benefits & use cases

Most shadow tools give you a single offset/blur/spread row — this one builds shadows three different ways. In Layers mode you stack as many box-shadow layers as you like, tuning each one’s X/Y offset, blur, spread, colour, opacity, and inset flag, then reorder, duplicate, or delete them to compose multi-layer depth. Smooth mode auto-generates a stack of exponentially-decaying layers from a single light source, so you set elevation, light angle, softness, and intensity and get a natural, diffused shadow you can then bake into editable layers. Neumorphic mode produces the soft-UI light-and-dark pair where the element and page share one surface colour, with flat, concave, convex, and pressed variants. A live preview renders your shadow on a card, button, circle, or image against a light or dark surface, and a curated gallery gives you starting points. Export to plain CSS, a CSS variable, SCSS, Tailwind v4 (@theme), Tailwind v3 config, or a ready-to-paste arbitrary shadow-[…] class.

How to Use

  1. 1Pick a mode at the top: Layers for manual stacking, Smooth for an auto light-source shadow, or Neumorphic for soft UI.
  2. 2In Layers, add/duplicate/reorder layers and edit the selected layer’s X, Y, blur, spread, colour, opacity, and inset.
  3. 3In Smooth, set layers, elevation, light angle, softness, intensity, spread, and colour — then "Edit as layers" to fine-tune.
  4. 4In Neumorphic, choose flat/concave/convex/pressed and adjust surface colour, light angle, distance, blur, and intensity.
  5. 5Use the preview toolbar to switch shape (card, button, circle, image), set the corner radius, and toggle the light/dark surface, or load a gallery preset.
  6. 6Choose an output format, set a token name for the named formats, and copy, download, share, or pipe the code.

Key Benefits

  • Three distinct workflows: manual Layers, auto Smooth, and Neumorphic soft UI
  • Stack unlimited layers with per-layer offset, blur, spread, colour, opacity, and inset
  • Smooth mode synthesises exponentially-decaying layers from one light source
  • Live preview on card, button, circle, or image over a light or dark surface
  • Curated gallery of ready-made shadows as one-click starting points
  • Six export formats including CSS variable, SCSS, Tailwind v3 + v4, and an arbitrary class
  • Shareable URL and pipe-to-another-tool output, all generated in the browser

Common Use Cases

  • Building layered elevation tokens for a component library or design system
  • Generating a natural, realistic shadow without hand-tuning a dozen layers
  • Designing neumorphic buttons and cards with a matched light/dark shadow pair
  • Producing a named --shadow-* CSS variable or Tailwind shadow utility
  • Prototyping hover-elevation states by duplicating and re-tuning a layer
Card

Layers (2)

Layer 1

Gallery

Copy, download, share, or pipe to another tool

box-shadow: 0px 10px 15px -3px rgba(11, 19, 36, 0.2), 0px 4px 6px -4px rgba(11, 19, 36, 0.16);

Three ways to build a shadow

Layers gives you full manual control — stack, reorder, and tune each shadow. Smooth auto-generates a stack of exponentially-decaying layers from a single light source for natural depth. Neumorphic produces the soft-UI light/dark pair. Every mode exports to plain CSS, CSS variables, SCSS, and both Tailwind v3 (config) and v4 (@theme) — plus a ready-to-paste arbitrary shadow-[…] class.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools