Box Shadow Generator

Box Shadow Generator is for anyone styling a web page who wants shadows that look natural rather than flat and grey. Good shadows are rarely one line: designers stack several layers, each with its own offset, blur and strength, so the shadow is crisp near the element and soft further away. This tool makes that easy. Add as many layers as you like, pick one to edit, drag its offset on a pad, and the preview updates as you move.

It covers the three kinds of CSS shadow in one place. Box shadow is the usual card and button shadow, with spread and inset for inner shadows. Text shadow works on lettering, for glows, outlines and retro 3D type. Drop shadow uses the CSS filter, which follows the real outline of a shape or a transparent PNG instead of its rectangular box. Each mode keeps its own layers, so you can switch back and forth without losing work.

You can try every shadow on a box, a word or a shape, change its size and colour, and flip the page behind it between light and dark to check both themes. When you are happy, copy the CSS or a Tailwind class. Everything happens in your browser and your last design is remembered on this device only.

1. Choose “Box shadow”, “Text shadow” or “Drop shadow (filter)” at the top, or tap one of the presets underneath.
2. Pick a layer in the Layers list. Drag the dot in the offset pad, or use the X and Y sliders, to move the shadow.
3. Set Blur, Spread, Shadow colour and Opacity for that layer, and tick Inset for an inner shadow.
4. Press “Add layer” to stack another shadow. Use the arrows to reorder, the eye to hide one, and the copy and bin buttons to duplicate or delete.
5. Adjust the preview element and switch Light or Dark to test the background, then press “Copy CSS” or “Copy Tailwind class”.

• Unlimited shadow layers with add, duplicate, delete, hide and move up or down.
• Box shadow with X and Y offset, blur, spread, colour, opacity and inset.
• Text shadow and filter: drop-shadow() modes, each remembering its own layers.
• A draggable offset pad with keyboard control: arrow keys move 1px, Shift moves 10px, Home resets.
• Number boxes beside every slider for exact values beyond the slider range.
• Preview on a box (width, height, corner radius), a line of your own text, or a star, heart or speech bubble.
• Light and dark preview backgrounds, plus free choice of element and page colours.
• Nineteen presets across the three modes, including soft, layered realistic, neumorphic, glow, hard retro, inner, neon and sticker.
• Copy as tidy CSS, one layer per line, or as a Tailwind CSS arbitrary value.

• For realistic depth, use several faint layers rather than one dark one. Keep each layer’s opacity low, around 5–15%, and let the blur grow with the offset.
• Tint shadows with a dark version of the page colour instead of pure black. On a blue page, a navy shadow looks far more natural.
• Neumorphic shadows only work when the box and the page are the same colour. The preset sets both for you; change them together.
• Use a negative spread with a large blur to keep a shadow under an element instead of around it, a common trick for floating cards.
• Drop shadows can be heavy on very large images or animations. If scrolling feels slow, try fewer layers or a smaller blur.