Skip to main content
Toollyz

Search tools

Search for a command to run...

Box Shadow Generator

Add as many shadow layers as you want — each with X / Y offset, blur, spread, colour, alpha and inset. Live preview against four shapes (card, button, square, circle). Eight presets cover soft drop, elevated, floating, neumorphic, glow, focus ring, long shadow and layered stripes. Copy CSS instantly. 100% offline.

What is the Box Shadow Generator?

Box Shadow Generator is a layer-based editor for the CSS `box-shadow` property. Every entry is one shadow with five sliders — X offset (-60 to 60 px), Y offset (-60 to 60 px), blur (0-80 px), spread (-30 to 30 px) and a colour picker with alpha (0-100%). Toggle `inset` per layer to flip a shadow inside the element. Drop in a preset to start from a sensible recipe — Soft (one subtle drop), Elevated (a 2-layer Material-style stack), Floating (close + wide blur for a hovering card), Neumorphic (paired inner highlight + shadow), Glow, Focus ring, Long shadow (18 tiny stacked shadows for a flat retro look), and Layered stripes (three offset colour blocks). The live preview renders against four target shapes — Card, Button, Square, Circle — over a configurable stage background. Output is a single `box-shadow: …;` line with comma-separated layers.

How to use it

  1. Pick a preset to start, or hit 'Add' to start from a single layer.
  2. Drag the sliders for X, Y, blur and spread on each layer.
  3. Open the colour swatch and slide the alpha — most natural shadows live below 25% opacity.
  4. Click 'Copy CSS' to grab the production-ready value.

Benefits

  • Unlimited shadow layers — stack as many as your design needs.
  • Eight presets covering the recipes you actually use day-to-day.
  • Inset toggle per layer — needed for neumorphic and pressed-button styles.
  • Four preview shapes — Card, Button, Square, Circle — at preset dimensions.
  • Per-layer colour picker with alpha slider (rgba output).
  • Adjustable stage background colour for contrast testing.
  • Output is plain `box-shadow: …;` CSS — paste straight into any stylesheet.
  • Layers, stage background and shape persist in localStorage.
  • Runs 100% in your browser — no server, no upload.

Frequently asked questions

What's the difference between blur and spread?

Blur softens the edge of the shadow — at blur 0 you get a sharp rectangle, at blur 32 a fluffy cloud. Spread grows (or shrinks, if negative) the shadow before the blur is applied. A negative spread + positive blur is the classic 'tight shadow that doesn't bleed past the element'.

What's `inset`?

Renders the shadow inside the element instead of outside — useful for pressed buttons, inset wells, and the highlight half of a neumorphic effect.

Why do my shadows look harsh?

Most natural shadows live below 25% alpha. Try the colour picker and drop the alpha slider — `rgba(0, 0, 0, 0.18)` reads much more 'real' than solid black.

Why does the Neumorphic preset use white?

Neumorphism mimics objects extruded from the page surface — they have a dark shadow on one side and a light highlight on the other, so the element appears lit from one corner. The white inset shadow is that highlight.

How do multiple layers combine?

CSS renders each layer in order, with the first on top. For elevation, put a tight close shadow first and a soft wide one underneath — that matches how real shadows fall.

Is the order of layers important?

Yes — the first listed shadow is rendered topmost. If you stack a glow on a drop shadow, the order decides whether the glow or the drop sits closer to the element.

Can I copy a single layer?

Not yet — the Copy CSS button outputs the full stack. Delete layers you don't want first.

How do I export PNG?

This tool exports CSS, not PNG. Use the CSS in your own element, screenshot the result with the browser DevTools or use the Code Screenshot Generator for canvas exports.

Why is my colour picker showing alpha as 100%?

Some browsers' `input type=color` strips alpha. The separate slider lets you set it independently — your final CSS uses `rgba(…)`.

Are settings saved between visits?

Yes — layers, stage colour and shape persist in localStorage under `toollyz:box-shadow`.

Is anything uploaded?

No. Everything renders client-side and the page is statically exported — Toollyz has no server.

Related tools

See all image tools