Box Shadow Generator

A CSS box-shadow is built from five parts, and each slider in this tool maps to one of them. The X offset moves the shadow left or right, and the Y offset moves it up or down, so a positive Y drops the shadow below the element like overhead light. Blur radius controls how soft the edge is: zero gives a hard, crisp line, while a larger value spreads it into a diffuse haze. Spread grows or shrinks the shadow before the blur is applied. Color, with its opacity, is output as an rgba() value so the transparency is baked in. A sixth keyword, inset, flips the whole shadow inward for a pressed look. Adjust each slider above and the live preview updates instantly, so you can see exactly how a value changes the result before copying the code.

In CSS you put several shadows in one box-shadow rule by separating each with a comma, and they render back to front, so the first shadow sits on top. This tool handles that for you: you add a new layer, and it manages the comma-separated syntax automatically. Layering is how realistic depth is built, because a single shadow looks flat while two or three at different offsets, blurs, and opacities mimic how light actually falls. You can reorder layers, duplicate one as a starting point, and toggle any layer on or off to compare looks without deleting it. The Material elevation presets use exactly this approach, stacking two or three layers per level the way Google's spec does. Build your stack with the layer controls above, then copy the combined rule in one click.

Spread expands or contracts a shadow before blur is applied. A positive spread makes the shadow larger than the element, while a negative spread shrinks it inward so the shadow sits tighter underneath. Negative spread is the trick behind modern card shadows: by pulling the shadow in and pushing it down with a small Y offset, you get a soft pool of shadow directly below the card instead of a fuzzy halo leaking out on every side. That reads as a subtle, grounded elevation rather than a dated drop shadow. Pairing a low opacity color with negative spread and a moderate blur is the recipe most design systems use for clean, lifted cards. The spread slider here runs from -50px to 50px, so set a negative value, watch the preview tighten, and copy the result straight into your stylesheet.

Neumorphism, or soft UI, is a style where elements look extruded from the background rather than floating above it, as if pressed out of the same material. The effect needs two shadows on a single surface color: a dark shadow on one side and a light highlight on the opposite side, so the element appears gently raised. Getting that pair right by hand is fiddly because both shadows must derive from the same base color. This tool's dedicated Neumorphism mode does the math for you: set a base color, intensity, distance, and blur, and it calculates the matching light and dark shadow pair automatically. You can preview it on a card, button, or avatar and switch between light and dark backgrounds to check contrast. Open the soft-UI mode above, tune the base color, and copy the generated shadow pair.

Yes. The generator produces the same shadow in five copy-ready formats so it drops straight into your stack. You get plain CSS as a ready-to-paste box-shadow rule, a Tailwind arbitrary-value class in the shadow-[...] form, an SCSS variable you can reuse across partials, a styled-components template literal for CSS-in-JS, and design tokens as JSON in the standard token shape for design-system pipelines. You can copy the full rule, copy just the raw value when you only need the part after the property, or download the output as a file. A built-in history keeps up to 20 of your recent states, so you can step back to an earlier version without redoing your work. Build the shadow you want above, pick the format that matches your project, and grab the code in one click.