The free Box Shadow & Neumorphism CSS generator

This box-shadow generator lets you design beautiful CSS shadows visually — from a single soft drop shadow to stacks of layered shadows, smooth neumorphism (soft UI) components and dramatic 3D text shadows — then export clean, copy-paste CSS, Tailwind or HTML in seconds. Drag the element to set the offset, spin the light-source dial, add as many shadow layers as you like, and watch the live preview update instantly. No sign-up, no watermark, completely free.

What is the CSS box-shadow property?

The box-shadow property adds one or more shadows around an element's frame. Each shadow takes up to six values: offset-x offset-y blur spread color, plus an optional inset keyword to draw the shadow inside the box instead of outside. A positive offset-x pushes the shadow right, a positive offset-y pushes it down, blur softens the edge, and spread grows or shrinks the shadow. Because the property accepts a comma-separated list, you can layer multiple shadows to build rich, realistic depth.

How to create a box shadow with CSS

1. Set the offset — choose offset-x and offset-y, or simply drag the element on the preview to position the shadow like a light source.
2. Soften the edge — raise the blur for a diffuse, natural shadow; keep it at 0 for a hard, graphic edge.
3. Tune the spread — a positive spread enlarges the shadow, a negative spread tucks it under the element.
4. Pick a colour & alpha — soft shadows usually use a low-opacity black or a tinted colour for a coloured glow.
5. Layer more shadows — add extra layers (and an inset layer or two) to fake real-world ambient and key lighting.
6. Copy the code — grab the CSS, Tailwind or HTML and paste it into your project.

What is neumorphism (soft UI)?

Neumorphism, or "soft UI", is a design style where elements appear extruded from — or pressed into — a single background colour. The trick is two shadows: a darker shadow on the side away from the light and a lighter highlight on the side facing it, both derived from the element's own colour. Because the element and its background share the same base colour, the result looks like soft, moulded plastic. This generator computes both shadow colours automatically by lightening and darkening your base colour, and lets you switch the light to any corner or flip between raised, pressed, flat and concave styles.

Layering multiple shadows

The biggest difference between a flat, amateur shadow and a convincing one is layering. Real objects cast several overlapping shadows: a tight, dark contact shadow near the surface and a wider, softer ambient shadow further out. By stacking two or three box-shadow layers with increasing blur and decreasing opacity, you get depth that feels physically grounded. This tool supports unlimited layers — add, remove and re-tune each one, including inset layers for inner shadows and 3D text effects.

Features of this shadow generator

• Three modes — box shadow, neumorphism (soft UI) and layered text shadow in one tool.
• Unlimited layers — stack, edit and remove as many shadow layers as you need.
• Drag-to-offset — drag the element or spin the light-source dial to set the shadow direction.
• Inset shadows — toggle any layer to an inner shadow for pressed and embossed looks.
• Smart neumorphism — automatic light/dark shadow colours from a single base colour.
• Export anywhere — copy as CSS, Tailwind arbitrary values or ready-made HTML.

Browser support for box-shadow and text-shadow

Both box-shadow and text-shadow are supported in every modern browser — Chrome, Edge, Firefox, Safari and mobile — with no vendor prefixes required. Multiple comma-separated layers, inset shadows and the spread radius all work everywhere, so the code this generator produces is safe to ship straight to production.

Box shadow & neumorphism — frequently asked questions