CSS Generators
CSS Gradient GeneratorCSS Box-Shadow GeneratorCSS Grid GeneratorCSS Clip-Path Generator

CSS Box-Shadow Generator

Build layered box-shadows visually and preview them on light, dark and coloured backgrounds.

Runs in your browserNo sign-up required
Start from a preset
Shadow 1
10%
Shadow 2
10%

Stack two or three soft shadows for a natural look — duplicate a layer, then make one tighter and one wider.

Preview
16px
Export

Real Depth Needs More Than One Shadow

A single flat shadow rarely looks convincing on its own — genuine depth comes from layering two or more shadows with different blur and opacity, which is exactly how Material Design's elevation scale and the neumorphic Soft UI look are actually built. This tool supports stacking any number of shadow layers, starting from presets that match those exact conventions, previewed on a real card and button.

How to Use This Tool

  1. 1Start from a presetMaterial elevation levels 1-5, Soft UI (neumorphism), neon glow, or long shadow.
  2. 2Adjust offset, blur, and spreadEach with its own slider, for precise control over how the shadow looks.
  3. 3Stack multiple shadow layersReal depth (like Material Design elevation) usually comes from combining two or more shadows, not one.
  4. 4Export in the format you needPlain CSS, a Tailwind arbitrary-value class, or an SCSS variable.

Why Layering Actually Matters

  1. 1A single shadow looks flatReal-world shadows have both a sharp, close component and a soft, diffuse one. Combining two shadow layers with different blur and opacity values is what actually produces a convincing sense of depth, which is why this tool supports stacking any number of layers rather than just one.
  2. 2Neumorphism specifically needs two opposing shadowsThe soft, embossed "Soft UI" look comes from one light shadow and one dark shadow on opposite corners of the same element — a single shadow can't produce it, which is why it's included as a two-layer preset rather than something you'd discover by trial and error.
  3. 3Material Design elevation is a defined, numbered scaleGoogle's Material Design specifies exact shadow values for each elevation level (cards, dialogs, app bars). Rather than guessing at blur and opacity values, the built-in presets match that scale directly.

Frequently Asked Questions

What does "inset" do?

It flips the shadow to render inside the element's border instead of outside it, creating a pressed-in or recessed look rather than a shadow cast outward — useful for input fields or pressed-button states.

Why does a Material elevation preset look different from a plain drop shadow?

Material Design's elevation levels use specific offset, blur, and opacity values calibrated to look consistent across a range of surface heights — the presets here match those exact values rather than an arbitrary guess.

What is neumorphism / Soft UI?

A design style where elements appear to be extruded from or pressed into the background using two opposing soft shadows (one light, one dark) instead of a hard-edged single shadow — it only works cleanly on a background color close to the shadow colors themselves.

Can I add more than two shadow layers?

Yes — there's no fixed limit. Add as many layers as you want, each with independent offset, blur, spread, color, and inset settings.

Is my design saved anywhere?

No — everything runs locally in your browser. Nothing you create here is saved or transmitted.

Is this box-shadow generator free to use?

Yes, completely free, with no sign-up and no limit on how many shadows you create.