Free CSS Box Shadow Generator Online

CSS box-shadow syntax explained

The box-shadow CSS property accepts the following values in order:

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

/* Examples */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);           /* soft drop shadow */
box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06); /* layered */
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);       /* inner shadow */
box-shadow: 0 0 0 3px #3B82F6;                         /* focus ring */

• offset-x: positive values push the shadow right, negative values push it left.
• offset-y: positive values push the shadow down, negative values push it up.
• blur-radius: 0 produces a sharp hard edge. Higher values create a soft, diffuse shadow.
• spread-radius: positive values expand the shadow beyond the element boundary, negative values shrink it.
• color: any valid CSS color value. Use rgba() to control opacity, or use the color format converter to get the right format.
• inset: optional keyword that moves the shadow inside the element instead of outside.

CSS box shadow bottom only

A CSS box shadow bottom effect restricts the shadow to below the element, removing any visible shadow on the sides. The technique uses a negative spread value to pull the shadow inward, combined with a zero X offset and a positive Y offset:

/* Soft bottom-only shadow */
box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.20);

/* Tighter bottom-only shadow for cards */
box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.30);

/* Bottom shadow with visible cast */
box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.25);

The negative spread value (the fourth number) pulls the shadow edges inward by that many pixels, preventing the shadow from wrapping around the sides of the element. Adjust the Y offset and spread together: if you increase Y, increase the negative spread proportionally to keep the shadow contained below the element. This is one of the most common shadows used for navigation bars, sticky headers, and card components.

Inner box shadow CSS (inset)

An inner box shadow in CSS uses the inset keyword to render the shadow on the inside of the element border. Toggle the Inset switch in the generator above to enable inset mode. All controls work identically to the outer shadow — the only difference is where the shadow is rendered.

/* Pressed button state */
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.30);

/* Recessed input field */
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);

/* Deep inset panel */
box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.15);

/* Top-only inset shadow */
box-shadow: inset 0 6px 12px -4px rgba(0, 0, 0, 0.20);

Inset shadows are commonly used for toggle switches in the off state, search input fields, textarea backgrounds, and any surface that should appear sunken into the page. You can combine an inset shadow with an outer shadow on the same element by separating the two values with a comma.

Layering multiple box shadows for realistic depth

A single CSS box shadow rarely looks as natural as two or three shadows stacked together. Real physical shadows have a sharp, dark component close to the object and a soft, diffuse component that spreads far away. You can replicate this by layering multiple box shadow CSS values separated by commas:

/* Elevation level 1 — subtle card lift */
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05);

/* Elevation level 2 — modal or popover */
box-shadow: 0 4px 8px rgba(0,0,0,0.10), 0 16px 40px rgba(0,0,0,0.08);

/* Elevation level 3 — overlay or drawer */
box-shadow: 0 8px 16px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.10);

/* Hard flat shadow (offset, no blur) */
box-shadow: 4px 4px 0px #1F2937;

The first value in the list renders on top. Design systems like Material Design and Tailwind UI use layered shadow scales to communicate elevation consistently across all components. Build the shadow colors to match your brand palette using the color palette generator if you want colored shadows rather than neutral black ones.

CSS box shadow presets and when to use them

The generator includes ready-made shadow presets for the most common UI patterns. Here is what each one is for:

• Lifted: a strong layered shadow that makes a card or button look raised well above the page. Good for primary call-to-action cards.
• Soft Float: a large, very diffuse shadow at low opacity that creates a gentle floating effect. Suited to content cards and modal dialogs on white backgrounds.
• Hard: a sharp offset shadow with no blur, inspired by brutalist and retro UI styles. Works on buttons and image frames in bold design systems.
• Neon Violet / Neon Cyan: layered glowing shadows using vivid colors at low opacity. Used for interactive elements in dark-themed UIs, dashboards, and gaming interfaces.
• Sides: equal shadows on both left and right edges. Creates a depth effect for vertical sidebars and panels.
• Pressed: an inset shadow that simulates a button being pushed down. Apply this on :active state to make button interactions feel tactile.

Box shadow CSS for common UI components

Different UI components call for different shadow approaches. Here are the most practical patterns:

/* Focus ring (replaces outline) */
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);

/* Input field focus state */
box-shadow: 0 0 0 2px #3B82F6, inset 0 1px 3px rgba(0,0,0,0.10);

/* Dropdown / popover menu */
box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 12px 32px rgba(0,0,0,0.08);

/* Sticky navbar bottom border effect */
box-shadow: 0 1px 0 rgba(0,0,0,0.08);

/* Tooltip */
box-shadow: 0 2px 8px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12);

Using box-shadow: 0 0 0 Npx color (spread-only, no blur) is a common technique for focus rings because it does not affect layout like an actual border does. Run your focus ring color against the page background through the WCAG contrast checker to confirm it meets the 3:1 minimum required by WCAG 2.1 SC 1.4.11 for UI components.

Shadow color: choosing the right hue and opacity

Most UI shadows use a near-black color at low opacity, such as rgba(0, 0, 0, 0.12), because neutral shadows look natural on any background color. Colored shadows — where the shadow hue matches or complements the element color — add a glow effect that works well for buttons and cards in design systems with strong brand colors.

On dark backgrounds, you will need higher opacity values since the contrast between a dark shadow and a dark background is low. A shadow that reads well at 0.12 opacity on white may need 0.40 opacity or more on a dark surface. Always check your shadow in both light and dark contexts if your project supports both themes. Use the CSS gradient generator if you want to combine a gradient background with a shadow for layered depth.