Free CSS Box Shadow Generator

What is a CSS Box Shadow Generator?

A CSS box shadow generator is a visual tool for creating box-shadow values without guessing numbers by hand. Adjust the X offset, Y offset, blur, spread, color, opacity, background color, box color, and inset setting, preview the result, then copy the CSS.

This free CSS box shadow generator is useful for UI cards, buttons, modals, dropdowns, navigation bars, product tiles, pricing boxes, dashboard panels, form inputs, and soft interface effects. Instead of repeatedly editing CSS and refreshing your page, you can tune the shadow visually and copy a ready-to-use line like:

box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.20);

Shadows are small details, but they change how a design feels. A soft shadow can make a card feel lifted. A stronger shadow can make a modal feel clearly above the page. An inset shadow can make an input or control feel pressed into the surface. The right value depends on context, and a live preview makes that easier to judge.

How to Use the Box Shadow Generator

Start with the preview box. Adjust the sliders until the shadow matches the effect you want, then copy the CSS.

The tool controls:

• X offset: moves the shadow left or right
• Y offset: moves the shadow up or down
• Blur: controls how soft or sharp the shadow edge is
• Spread: expands or shrinks the shadow size
• Shadow color: sets the shadow color
• Opacity: controls how visible the shadow is
• Background: changes the preview background
• Box color: changes the preview element color
• Inset: turns the shadow into an inner shadow

The background and box color controls are there because shadows look different depending on the surface. A shadow that looks good on a light grey background may disappear on white or feel too heavy on a dark background. Testing the shadow against realistic colors helps you avoid surprises.

CSS Box Shadow Syntax

The basic box-shadow syntax looks like this:

box-shadow: offset-x offset-y blur-radius spread-radius color;

Example:

box-shadow: 0px 8px 24px 0px rgba(15, 23, 42, 0.16);

Each part controls a different aspect of the shadow.

X offset

The X offset moves the shadow horizontally. Positive values move it to the right. Negative values move it to the left.

Most UI shadows use an X offset close to 0px because light usually appears to come from above rather than strongly from the side. A large X offset can be useful for special effects, but it often looks unnatural for normal cards and panels.

Y offset

The Y offset moves the shadow vertically. Positive values move it downward. Negative values move it upward.

For common UI elevation, a positive Y offset is usually best. It makes the element feel lifted above the page. A small value like 2px or 4px is subtle. A larger value like 16px or 24px feels more dramatic.

Blur radius

Blur controls the softness of the shadow. A low blur creates a sharp edge. A high blur creates a soft, diffused shadow.

Modern UI design often uses softer shadows with more blur and lower opacity. This creates depth without making the interface look dirty or heavy.

Spread radius

Spread expands or shrinks the shadow before blur is applied. Positive spread makes the shadow larger. Negative spread makes it tighter.

Many clean UI shadows use 0px spread. Negative spread can be useful for subtle shadows that should not expand too far. Positive spread is stronger and should be used carefully.

Color and opacity

Shadow color is usually black with opacity, but it does not have to be. A dark navy shadow can look better on cool interfaces. A brown or warm shadow can suit beige or warm designs. Colored shadows can work for brand effects, glows, and playful UI.

Opacity is one of the most important controls. If a shadow feels too heavy, reduce opacity first. A low-opacity shadow often looks more natural than a high-opacity shadow with less blur.

Common CSS Shadow Examples

Soft card shadow

box-shadow: 0px 4px 16px 0px rgba(15, 23, 42, 0.12);

Use this for cards, dashboard panels, content blocks, and soft UI sections.

Floating card shadow

box-shadow: 0px 12px 32px -8px rgba(15, 23, 42, 0.24);

Use this when a card needs to feel more lifted, such as a featured card, pricing card, or hover state.

Modal shadow

box-shadow: 0px 24px 64px -16px rgba(15, 23, 42, 0.36);

Use this for modals, dialogs, command menus, and overlays that need to sit clearly above the rest of the page.

Button hover shadow

box-shadow: 0px 8px 20px -8px rgba(37, 99, 235, 0.45);

Use this for primary buttons, especially when the shadow color is related to the button color.

Inset input shadow

box-shadow: inset 0px 2px 4px 0px rgba(15, 23, 42, 0.10);

Use this for inputs, pressed controls, recessed panels, and subtle inner depth.

How to Create Good UI Shadows

Good shadows should support hierarchy. They should help users understand which elements are interactive, elevated, grouped, or above other content.

Start subtle

For most interfaces, start with a subtle shadow:

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.10);

Then adjust from there. If the element needs more lift, increase Y offset and blur. If the shadow feels too visible, reduce opacity.

Use opacity before darkness

A common mistake is using a pure black shadow at high opacity. This can make cards and buttons look muddy. Instead, keep the color dark but reduce opacity.

For example, rgba(0, 0, 0, 0.12) often looks cleaner than a darker, sharper shadow.

Match shadow strength to elevation

Not every element should have the same shadow. A card, dropdown, and modal represent different elevation levels.

A simple elevation system might look like:

• small shadow for cards
• medium shadow for dropdowns and popovers
• large shadow for modals
• inset shadow for pressed or recessed elements

This creates visual consistency across the interface.

Avoid heavy shadows on every card

If a page has many cards, heavy shadows can make the whole layout feel noisy. For dashboards, lists, product grids, and dense interfaces, a subtle border plus a light shadow often works better than a large shadow on every item.

Test shadows on the real background

A shadow changes depending on the background color. On white, it may be barely visible. On light grey, it may look perfect. On dark backgrounds, black shadows may disappear entirely.

Use the background color control to preview how the shadow behaves against the actual surface you plan to use.

Shadow Design by Use Case

Card shadows

Card shadows should usually be soft and restrained. The goal is to separate the card from the background without making it feel like it is floating too high.

Good card shadows often use:

• X offset near 0px
• Y offset between 2px and 8px
• blur between 8px and 24px
• low opacity
• little or no spread

Use stronger card shadows only for hover states, featured content, or marketing layouts where the visual style is intentionally more expressive.

Modal shadows

Modals need more elevation than cards because they sit above the page and demand attention. A modal shadow can be wider, blurrier, and darker than a card shadow.

Good modal shadows often use:

• Y offset between 16px and 32px
• blur between 32px and 80px
• negative spread for cleaner edges
• medium opacity

The page overlay also matters. A modal with a dark backdrop may need a less intense shadow than a modal on a plain page.

Dropdown and popover shadows

Dropdowns and popovers need enough shadow to separate them from the interface, but they should not look as heavy as modals.

Good dropdown shadows often use:

• small or medium Y offset
• medium blur
• low to medium opacity
• no spread or slight negative spread

This helps the menu feel close to the trigger button while still clearly floating above nearby content.

Button shadows

Button shadows should be used carefully. A subtle shadow can make a primary button feel clickable, but too much shadow can make the button look bulky.

Button hover states can use a stronger shadow than the default state. This creates a sense of response when the user interacts with the button.

Colored button shadows can work well if they are based on the button color. For example, a blue button can use a transparent blue shadow instead of a black one.

Inset shadows

Inset shadows appear inside the element. They are useful for inputs, toggles, pressed buttons, recessed panels, and subtle surface effects.

Use inset shadows lightly. Large inset shadows can make an interface look dated. A small inner shadow can add depth without becoming the main visual feature.

Box Shadow vs Drop Shadow

CSS has both box-shadow and filter: drop-shadow(), and they are not exactly the same.

box-shadow follows the element's box. It is best for cards, buttons, panels, modals, and rectangular UI elements.

drop-shadow() follows the visible shape of the element, including transparent areas in images or SVGs. It is often better for icons, logos, PNG images, and non-rectangular shapes.

For normal web UI components, box-shadow is usually the right choice.

Multiple Box Shadows

CSS allows multiple shadows separated by commas:

box-shadow:
  0px 1px 2px rgba(15, 23, 42, 0.08),
  0px 12px 24px rgba(15, 23, 42, 0.12);

Multiple shadows can look more natural because real shadows often have both a close contact shadow and a larger soft shadow. Use this technique when a single shadow feels either too sharp or too blurry.

The current generator creates one shadow at a time, which is a good starting point. You can copy the result and combine it manually with another value if you want a layered effect.

Dark Mode Shadow Tips

Shadows behave differently in dark mode. A black shadow on a dark background may be invisible. Instead of relying only on shadows, dark UI often uses:

• lighter borders
• subtle background contrast
• soft glows
• transparent light shadows
• elevation through color differences

For dark mode, test the shadow against the actual dark background. A slightly lighter panel color plus a subtle shadow or border often reads better than a heavy black shadow.

Common Box Shadow Mistakes

Too much opacity

High-opacity shadows make components look dirty or heavy. Reduce opacity before changing anything else.

Too little blur

Sharp shadows can look harsh and dated. Increase blur for softer, more modern UI shadows.

Inconsistent elevation

If cards, dropdowns, and modals all use random shadow styles, the interface feels unstructured. Use a small set of consistent shadow values.

Shadows without contrast

If the element and background are too similar, a shadow alone may not create enough separation. Add a border, adjust the background color, or increase contrast.

Using shadows as decoration only

Shadows should communicate hierarchy, depth, or interaction. If a shadow does not help the design feel clearer, it may not be needed.