Box shadow
Writes an eased multi-layer falloff — the hand-tuned “smooth shadow” technique, automated. Fine-tune any layer below after.
What is a layered box shadow?
A single box-shadow is one blur at one distance — which is why default shadows so often read
as a flat grey smudge. A layered box shadow stacks several shadows on one element, each a little farther
and softer than the last, so the result fades the way a real shadow does: dense at the edge, feathering
out with distance. This css box shadow generator builds that stack visually — write a whole eased falloff
with the Smooth sliders, then adjust any single layer's offset, blur, spread, color, or opacity on a live
preview card.
How to build your shadow
- Start from a preset — Smooth, Soft UI, a Material-style elevation, neumorphic, hard offset, or inner glow.
- Drag the Smooth stack sliders to write an eased multi-layer falloff: Layers for the count, Distance for depth, Softness for the curve.
- Fine-tune any layer in the Layers drawer — select its chip, then adjust offsets, blur, spread, color, and alpha, or flip it to Inset.
- Switch the Surface toggle between light and dark to check the shadow on both backgrounds before you ship it.
- Copy CSS for a paste-ready rule, or Copy Tailwind for the same stack as one
shadow-[…]arbitrary-value utility.
Smooth shadows: the falloff trick
The smooth shadow css technique that designers hand-tune — four to six layers whose offsets and blurs grow geometrically while each layer stays faint — is what the Smooth stack generator automates. One Distance value sets the final depth, Softness bends how quickly the layers ease outward, and the total opacity is split across the stack so adding layers never darkens the design as a side effect. The result is the deep-but-soft elevation you see in polished product UIs, from one slider instead of twenty minutes of tweaking.
Light surfaces, dark surfaces, and inner shadows
Shadows are surface-relative: the stack that looks perfect on white almost vanishes on a near-black page,
which is why the preview card sits on a switchable light or dark surface instead of a fixed one. Dark-mode
designs usually want higher shadow opacity, a colored glow, or a faint light inset along the top edge —
all three are a preset or a layer edit away here. Inner shadow css is the same property with the
inset keyword, so pressed buttons and engraved panels come from the same Layers drawer, and a
neumorphism shadow is just two opposing layers on a card that matches its background — one click on the
neumorphic presets.
Frequently asked questions
Is this box shadow generator free to use?
Yes — no signup, no account, no watermark. Copy CSS and Copy Tailwind both give you the complete box-shadow the preview shows, ready to paste into any project, commercial work included. The copied text carries one small comment line crediting MeshSVG, which you can delete freely.
Why do layered box shadows look better than a single shadow?
Real shadows are not one uniform blur — they are dense right under the object and fade progressively with distance. One box-shadow layer can only approximate that with a single blur value, which reads as flat and grey. Stacking several layers whose offsets and blurs grow while each stays faint reproduces the natural falloff, and that is exactly the stack the Smooth generator writes for you.
How do I make a smooth shadow in CSS?
Use the Smooth stack drawer: pick how many layers you want, set Distance for overall depth and Softness for how the layers ease outward, and the generator writes a mathematically-eased multi-layer box-shadow in one move. You can then fine-tune any individual layer in the Layers drawer — the export is always plain CSS that works everywhere box-shadow does.
How do I make an inner (inset) shadow?
Select a layer in the Layers drawer and flip its Direction control to Inset — that adds the inset keyword, which draws the shadow inside the element’s edges instead of behind them. Inset layers mix freely with outer layers in the same stack, which is how effects like pressed buttons, engraved panels, and inner glows are built.
Can I use these shadows with Tailwind CSS?
Yes. Copy Tailwind outputs the whole stack as a single arbitrary-value utility — shadow-[…] with every layer inside — which works in any Tailwind v3 or v4 project with zero config. This matters because Tailwind’s built-in shadow-sm through shadow-2xl scale can’t express a custom multi-layer stack; the arbitrary value carries your exact design.
How do I make a neumorphism (soft UI) shadow?
Apply the Neumorphic light or Neumorphic dark preset. Neumorphism uses two opposing shadows — a dark one down-right and a light one up-left — and it only reads correctly when the element is the same color as the background, so these presets also switch the preview card to match the surface. From there, tune both layers’ offsets and blurs to taste.
Do box shadows hurt page performance?
A static box-shadow is cheap: browsers rasterize it once and cache the result, so even an 8-layer stack costs almost nothing after first paint. The one thing to avoid is animating box-shadow directly, which forces a repaint every frame — animate opacity on a pseudo-element that carries the shadow instead, and scrolling stays smooth.
Do shadows work on dark backgrounds?
Dark surfaces need different tuning: a black shadow at the opacity that looks right on white nearly disappears on near-black, so raise the alpha, or use the Surface toggle to preview on dark while you tune. Two other tricks that read well in dark mode: a subtle outer glow in a brand color, or a faint light inset layer along the top edge to suggest depth.
Browse the box shadow CSS examples → After the soft-UI look specifically? The neumorphism generator →