CSS Box-Shadow Generator
Build layered CSS box-shadows with a live preview and copy the code in one click. Stack multiple shadows for realistic depth, dial in blur, spread, colour and inset, and watch the result update instantly. Runs entirely in your browser.
How to Use
- Drag the sliders for X and Y offset, blur, spread, and opacity, and pick a colour for each shadow layer.
- Press “Add layer” to stack a second (or third) shadow — real depth almost always uses more than one.
- Toggle “inset” to push a shadow inward, for pressed buttons and inner wells.
- Try a preset like Material or Neon for an instant starting point.
- Copy the generated box-shadow CSS straight into your stylesheet.
box-shadow: …;
The anatomy of a box-shadow
The CSS box-shadow property takes up to four lengths and a colour: offset-x offset-y blur spread colour. The two offsets slide the shadow sideways and down (a small positive Y reads as light coming from above, the most natural look). The blur softens the shadow’s edge — zero is a crisp hard edge, larger values fade it out. The spread grows or shrinks the shadow before it is blurred, which lets you make a tight halo or a broad ambient glow. Add the keyword inset and the whole thing is drawn inside the element instead of outside.
The real power, though, is that box-shadow accepts a comma-separated list of shadows, all rendered together. That is how convincing depth is made, and it is what this generator assembles for you as you stack layers.
Why good shadows use layers
A single shadow almost always looks flat or heavy. Look at how light actually falls on a card lifted off a table: there is a small, relatively dark shadow right under the edge where the card is close to the surface, and a much larger, softer, fainter shadow spreading out around it. Recreating that with two or three layered shadows — a tight one at low blur and a wide one at high blur and low opacity — is the trick behind the clean, physical depth of modern “material” design. Try the Material preset here and look at the two layers it uses. Tinting the shadow colour slightly, instead of pure black, and keeping opacities low are the other two habits that separate a polished shadow from a default one.
About this generator
This generator lets you build an unlimited stack of shadow layers, each with its own offset, blur, spread, colour, opacity, and inset flag, and shows the combined result live on an adjustable preview shape and backdrop. The output is standard box-shadow CSS that works in every modern browser. Everything runs on your device — nothing is uploaded — and the presets cover the common cases (soft drop, hard edge, material elevation, neon glow, and inset) to start from.
About the CSS Box-Shadow Generator
The CSS Box-Shadow Generator gives you a fast, free answer for colour and design work without sending anything off your device. Build layered CSS box-shadows with a live preview and copy the code in one click. Stack multiple shadows for realistic depth, dial in blur, spread, colour and inset, and watch the result update instantly. Runs entirely in your browser.
How it works
Pick your options and the tool makes the result right away. Do not like it? Make another one — you can do this as many times as you want. When it looks right, copy it into your own project. Everything is made on your device, so it is yours alone.
Want the deeper story? The Knowledge Base explains the ideas behind the tools in more detail.
Frequently Asked Questions
What do the four shadow numbers mean?
In order: horizontal offset (X), vertical offset (Y), blur radius, and spread. X and Y move the shadow; blur softens its edge; spread grows or shrinks the whole shadow before blurring. A positive Y with some blur is the classic "light from above" drop shadow.
Why stack multiple shadows?
Real objects do not cast a single flat shadow. Layering two or three shadows — a tight dark one close to the element plus a wider, softer, lighter one — produces the convincing sense of depth used in modern "material" interfaces. You can list as many shadows as you like, separated by commas, and this tool builds that list for you.
What does inset do?
An inset shadow is drawn inside the element instead of outside it, as if the surface were carved in. It is how you make a button look pressed, an input look recessed, or a panel look like an inner well.
Is the colour just black?
It does not have to be. A pure-black shadow can look harsh; tinting the shadow toward the background colour, or using a coloured glow, often looks more natural and is what polished designs do. Each layer here has its own colour and opacity.
How do I use the CSS Box-Shadow Generator?
Simply pick your options and read the result, which refreshes the instant you change something. There is nothing to submit and nothing to wait for.
Does it cost anything or need an account?
No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.
Is anything I type uploaded?
No. The tool works entirely on your device, so the values you enter never leave your browser.
Common Use Cases
Give cards realistic depth
Layer a close dark shadow with a wide soft one to lift a card off the page the way real material does.
Make buttons feel tactile
Use an inset shadow for a pressed state and a drop shadow for the resting state.
Create a neon glow
Stack two zero-offset coloured shadows with blur to make text or borders glow.
Match a design system
Reproduce an elevation token exactly, then copy the CSS into your components.
Last updated: