Box Shadow Generator

The most common shadow problem surfaces a month later, when a dark theme lands on the site: a black shadow on a dark background is invisible, and the cards lose all their depth along with it. Black on black has nowhere darker to go.

That is why the preview here sits on a light and a dark background at the same time, and the shadow's visibility on each is measured as a number: the contrast between the shadow's densest point and the background. When the shadow disappears on the dark side, the tool says so and suggests what dark themes use for depth instead: a one-pixel border or a lighter card surface.

A real shadow has a sharp edge next to the object and a blurred one far away. A single box-shadow layer can't do that, which is why the soft shadows on large sites are stacked from four to six layers with growing offset and blur. Here that stack is built in one move: you set the lift height and the number of layers, and the tool works out the growth curve. Each layer can then be edited on its own, up to eight layers in total, inner shadows included.

The typical mistake is solid black with no transparency: it reads as dirt, not as a shadow. Real shadows are semi-transparent, with a usual opacity between 5% and 25%. The tool flags this on its own, along with a note about a layer with zero blur: such a layer acts as a border, and sometimes that is exactly what you need.

A hover shadow is often animated with a transition on box-shadow, and on a stack of several layers that gets expensive: the browser recalculates the blur every frame. When the layers and the blur add up, the tool suggests a cheaper trick: put the shadow on a pseudo-element and animate its opacity.

Six presets are here: card, raised, dropdown, inset field, neomorphism, and neon. You can change the object's color and corner radius to see the shadow on something close to your site. The code exports as CSS, an SCSS variable, or a Tailwind class.

What's next

The background under a card is easy to build with the gradient generator, the page grid with the grid generator, and the shadow color can be lifted from a mockup with the palette from image tool.