The CSS box-shadow property draws shadows around an element. A single shadow is easy to write by hand, but good-looking depth usually comes from several shadows stacked together, and tuning offset, blur, spread and opacity by eye is slow. This generator lets you build a stack of layers, see the result on a box you can resize and recolor, and copy the finished value.
Each layer has its own horizontal and vertical offset, blur, spread, color with opacity and an inset switch, and can be hidden, reordered or removed. Presets give you a starting point for soft, layered, hard, glow, neumorphic and inset shadows. The output is a CSS declaration, a Tailwind arbitrary value or an SCSS variable. Everything runs in your browser.
It draws one or more shadows around an element's box. Each shadow has a horizontal offset, a vertical offset, an optional blur radius, an optional spread radius and a color, and can be marked inset to draw inside the box instead of outside. Several shadows are separated by commas.
Blur softens the edge of the shadow: 0 gives a hard edge and larger values fade it out over a wider area. Spread grows or shrinks the shadow before the blur is applied, so a positive spread makes it bigger than the box and a negative spread makes it smaller. A negative spread with a positive y offset is the classic way to get a soft shadow that only shows below the element.
A single shadow often looks flat or heavy. Stacking several shadows with growing offset and blur and a low opacity each gives a smoother, more natural depth, because real light falls off gradually. The Layered preset shows this. The first layer in the list is drawn on top, so reorder them to change which sits in front.
Choose Tailwind and copy the class. It uses an arbitrary value, shadow-[...], with underscores in place of spaces, which Tailwind turns back into spaces. Paste it into the class attribute of any element. If you reuse a shadow often, move the plain CSS value into boxShadow in your Tailwind theme instead.
Yes. Neumorphism is two shadows, a dark one and a light one, on a box that has the same color as its background, and the Neumorphic preset sets that up. Turn on Inset for a layer to draw it inside the box, which gives the pressed-in look of the Inset preset.
A lot. Dark shadows nearly vanish on a dark surface, and white glows only show on dark ones. Use the Light and Dark surface switch, or set your own background color, to check the shadow on the color it will really sit on.
No. The tool runs in your browser and nothing you set is uploaded or stored.