Free AI Tools

Free online CSS tool - no registration or login

Free CSS Box Shadow Generator

Create layered CSS shadows with up to four editable layers. Adjust offsets, blur, spread, color, opacity, and inset mode, preview the result, and copy the CSS without login.

  • - Up to four shadow layers
  • - Live browser-rendered preview
  • - Inset, color, opacity, and order
  • - Copy or download CSS

Shadow builder

Layer, preview, and copy a box-shadow

Use up to four layers. The first listed layer is painted on top; move layers when their edges overlap.

Shadow layers

2/4 layers. Disable a layer to compare without deleting it.

Live preview

Browser-rendered
Shadow preview2 active layers

Preview context

Not copied to declaration

Generated CSS

box-shadow: 0px 14px 30px -8px rgba(20, 26, 36, 0.18), 0px 3px 7px -2px rgba(20, 26, 36, 0.12);

The declaration includes active shadow layers only. Preview colors, size, and radius are included only in the optional demo download.

Layer order and preview context can change how a shadow feels. Test the copied declaration in its real component, especially when overflow or focus states are involved.

The editor runs in this browser tab. It does not upload or save your shadow settings, and no account is required. Preview background, element color, radius, and size are context controls and are not included in the copied box-shadow declaration.

  • Supports up to four layers with px values and opaque HEX colors plus opacity; it does not parse arbitrary box-shadow strings.
  • Preview background, element color, size, and radius are context controls and are not silently added to declaration copy.
  • Current-tab settings reset on reload; there is no URL sharing, Tailwind export, animation builder, or saved project.
  • The preview cannot reproduce every host layout, overflow rule, stacking context, or focus-state requirement.

How to Create a CSS Box Shadow

Move from an editable starting point to deliberate layers, a contextual preview, and CSS you can paste into a stylesheet.

Common shadow tasks

  • Create a soft card shadow with a close contact layer
  • Build a floating panel or modal elevation
  • Add an inset field or pressed-button effect
  • Create a crisp outline or focus-style ring
  1. Step 1

    Choose a preset or start with one layer

    Use a small editable starting point, or keep the default layer and set the geometry yourself.

  2. Step 2

    Tune and order each shadow layer

    Adjust X, Y, blur, spread, color, opacity, and inset. Add, disable, remove, or move layers as the preview changes.

  3. Step 3

    Review the preview and copy the CSS

    Check the shadow against the selected surface, then copy only the box-shadow declaration or download a demo CSS rule.

Understand the CSS Box Shadow Values

The editor keeps the CSS syntax visible while you work: offsets place the shadow, blur softens it, spread changes its size, and color plus opacity control its strength.

Edit the shadow values

Offset Sets the Direction

X moves the shadow left or right and Y moves it up or down. Zero offset keeps the shadow centered, which is useful for outlines and glows.

Blur Controls Softness

A blur of 0 keeps a sharp edge. Larger non-negative values diffuse the edge farther from the element; blur cannot be negative in the CSS syntax.

Spread Changes the Shadow Size

Positive spread expands the shadow shape before blur, while negative spread contracts it. This is separate from edge softness, so change one value at a time when tuning.

Build Layered and Inset Shadows

Multiple shadows are comma-separated and painted from the first item down. Use the layer list to make that order deliberate instead of guessing in a stylesheet.

The First Layer Paints on Top

Move a layer up when its edge or highlight should sit above the others. The copied CSS preserves the visible list order.

Combine Contact and Ambient Layers

A tighter, lower-blur layer can sit with a wider, softer layer to create a measured elevation. Treat this as a starting pattern, not a guaranteed realistic recipe.

Use Inset Per Layer

Inset applies only to the selected layer, so you can combine an inner edge with an outer lift or create a recessed field without changing the other shadows.

Test the Shadow in Context

The same declaration can feel different on light and dark surfaces or at a different radius. Adjust the preview context to judge the visual, while keeping those controls separate from the copied shadow value.

Change the Canvas and Element Colors

Try a quiet canvas and a contrasting element, then compare a light and dark surface. These colors affect only the live preview and demo CSS.

Match the Corner Radius

A box shadow follows the element's border radius. Match the radius of the card, button, input, or panel you plan to style before making a final call.

Separate Preview Settings from Output

Copy declaration returns only box-shadow. Download CSS includes a small annotated demo rule so you can see the preview context without mistaking it for required output.

Use the CSS and Avoid Common Problems

A valid declaration can still look wrong when the real container clips it or the component needs a complete focus treatment. Use the result as one part of the final UI review.

Shadows Do Not Reserve Layout Space

Box-shadow does not change the element's box-model dimensions. Add margin or surrounding space in the real layout when the visual needs room.

Overflow Can Clip the Effect

Check parent overflow, clipping, and stacking context when a shadow disappears at an edge. The standalone preview cannot reproduce every host layout.

Review Focus and Contrast in the Final UI

A shadow may support a focus or selected state, but it is not an accessibility audit. Check contrast, shape, non-color cues, and every interactive state in the finished component.

CSS Box Shadow Generator FAQ

Direct answers about layer order, blur and spread, inset shadows, preview context, CSS output, local processing, and integration limits.

Is this CSS box shadow generator free to use?

Yes. You can build, preview, copy, and download a CSS box shadow online without registration or login.

Can I create multiple box shadows?

Yes. The editor supports up to four comma-separated shadow layers. The first listed layer is painted on top, so the layer order can change overlapping edges.

What do the box-shadow values mean?

Each layer uses X offset, Y offset, blur, spread, color, opacity, and an optional inset keyword. The copied order is inset, X, Y, blur, spread, then color.

What is the difference between blur and spread?

Blur softens the edge and cannot be negative. Spread expands or contracts the shadow shape before blur, so it can be positive or negative.

What does inset do?

Inset draws that layer inside the element boundary instead of outside it. Each layer has its own inset setting, so inner and outer shadows can be combined.

Why does layer order matter?

CSS paints the first shadow in a comma-separated list above later shadows. Use the move controls to put a contact, outline, or highlight layer in the intended order.

Does box-shadow follow border radius?

The shadow follows the element's border radius. Use the preview radius to check the shape you expect, then test the declaration in the real component.

Why is my box shadow clipped?

A parent with overflow clipping, a tight container, or a stacking context can hide part of a shadow. Box-shadow also does not reserve layout space, so leave room around the element when needed.

Can I use a box shadow as a focus ring?

It can be part of a focus style, but a generated shadow does not prove that every focus state is visible or accessible. Check contrast, thickness, non-color cues, and the final component in context.

Does the tool save or upload my settings?

No external service is used for the editor. Settings stay in the current browser tab and reset when the page reloads; the tool does not import or parse an existing box-shadow string.

Related design tools

Choose a color, check contrast, build a gradient, or optimize an SVG for the same interface.

Browse design tools
Ca Design

Choose a Shadow Color

Pick a color visually or enter a HEX value, then fine-tune RGB, HSL, and opacity. Preview the result, compare nearby tones, and copy the exact color code with no login.

Open tool
CC Design

Check Color Contrast

Test text and background colors against WCAG 2.2 AA and AAA. See the exact contrast ratio, preview the selected font size and weight, and identify whether the pair passes.

Open tool
Ba Design

Build a CSS Gradient

Build linear, radial, or conic gradients with two to six color stops. Preview the result live, adjust the relevant direction or origin, and copy ready-to-use CSS without signing in.

Open tool
Oa Design

Optimize an SVG

Upload or paste SVG markup, optimize it locally with SVGO, and compare the code, file size, and visual result before downloading. No login or server upload required.

Open tool

Ready to tune the shadow?

Adjust the layers, inspect the real preview, and copy the exact CSS declaration.

Open the shadow generator