CSS box shadow generator: create shadows visually

A CSS box shadow generator lets you adjust shadow offset, blur, spread, and color with sliders and see a live preview, then copies the ready-to-use CSS property to your clipboard. Try the free ToolHQ box shadow generator to design and export your shadow in seconds.

A CSS box shadow generator is a visual developer tool that lets you configure box-shadow property values interactively, removing the need to manually write and test shadow CSS by hand.

Writing box-shadow values from scratch means editing code, reloading the browser, and guessing whether the shadow looks right at that offset and blur radius. A generator replaces that loop with a live visual preview: move a slider and the shadow updates immediately. When you are happy with the result, copy the CSS and paste it into your stylesheet. The whole process takes less time than writing the property name.

Key takeaways

• Adjust horizontal offset, vertical offset, blur radius, spread radius, color, and opacity with live preview
• Stack multiple shadows on one element for complex, realistic shadow effects
• Toggle inset to switch between outer (drop) shadows and inner shadows
• Output is a single box-shadow CSS property ready to paste into your stylesheet
• Runs in your browser, no code sent anywhere

---

What CSS box-shadow is and how the generator works

The CSS box-shadow property adds one or more shadows around an element's border box. The W3C CSS Backgrounds and Borders specification defines six parameters:

1. Horizontal offset (required): positive values push the shadow right; negative values push it left
2. Vertical offset (required): positive values push the shadow down; negative values push it up
3. Blur radius (optional): higher values create a softer, more diffuse shadow
4. Spread radius (optional): positive values expand the shadow; negative values shrink it
5. Color (optional): any valid CSS color, including rgba for transparency
6. Inset (optional): keyword that switches from an outer to an inner shadow

A complete box-shadow value looks like this:

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

Multiple shadows can be stacked by separating them with commas:

box-shadow: 2px 2px 6px rgba(0,0,0,0.15), 0px 8px 24px rgba(0,0,0,0.08);

This multi-layer technique produces the layered, realistic shadows used in modern UI design, where one shadow simulates close ambient light and another simulates diffuse environmental light.

The generator handles all of this visually. Drag the sliders, see the shadow update on a preview card, add a second layer if needed, and copy the resulting CSS.

---

When a box shadow generator saves you time

Designing UI cards and modals. Cards are one of the most common UI components, and their shadow depth communicates visual hierarchy. Whether you want a flat, almost-invisible shadow for a subtle lift effect or a deep, dramatic shadow for a floating modal, the generator lets you explore the design space in seconds.

Matching shadows to a design system. If you are implementing a design from Figma or Sketch, the designer specified shadow values. The generator lets you dial in those exact values (or get close and fine-tune) with sliders rather than manually editing numbers.

Creating inset shadows for inputs and wells. Inset shadows push the shadow inside the element, creating a recessed look commonly used for text inputs and content wells. Toggling the inset option in the generator switches the preview immediately so you can see whether inset or outer shadow works better.

Generating layered shadows for depth effects. Single-layer shadows can look mechanical. Layered shadows, one tight and dark close to the element and one wide and light for ambient spread, look more natural. The multi-shadow support in the generator makes this easy to build and adjust.

Mini-story: Jake, a 28-year-old front-end developer in Chicago, was building a dashboard for a fintech startup. The designer had specified a card shadow in Figma: two layers, a tight dark shadow and a diffuse ambient shadow. Jake would normally have written the CSS manually, reloaded the browser after each tweak, and iterated for 10-15 minutes before getting it right. He opened the ToolHQ box shadow generator instead, dialed in the first layer using the sliders, added a second layer, and had the exact CSS the designer intended in under three minutes. He pasted it into the stylesheet without a single reload cycle.

Generate your CSS box shadow now

---

How to use the box shadow generator: step by step

1. Set horizontal and vertical offset. Use the sliders to position the shadow. Start with both at 0 for a centered shadow that adds depth without direction, or offset one axis to create directional light.

2. Adjust blur radius. Start with blur around 10-20px for a natural soft shadow. Reduce it toward 0 for a hard shadow; increase it for a very diffuse glow effect.

3. Set spread radius. Spread 0 keeps the shadow the same size as the element. Positive values make it larger; negative values make it tighter. For most card shadows, 0 or slightly negative spread looks clean.

4. Choose shadow color and opacity. Click the color picker to choose a color, then adjust opacity. For dark surfaces casting shadows, use rgba(0, 0, 0, 0.15) to rgba(0, 0, 0, 0.3) depending on intensity. Colored shadows (using the element's accent color at low opacity) are a popular modern design pattern.

5. Add additional shadow layers if needed. Click "Add shadow" to stack a second or third layer. Multi-layer shadows create more realistic depth.

6. Copy the CSS. The generated box-shadow value updates in real time. Click copy to put it on your clipboard, then paste it into your CSS file.

---

Box shadow design tips

Use two-layer shadows for natural depth. The most realistic box shadows combine two layers: a tight, high-opacity layer for the immediate shadow beneath the element, and a wider, low-opacity layer for the ambient diffusion. This technique is used across Material Design, Apple's HIG, and most modern design systems.

Match shadow direction consistently. If your light source comes from the top-left, all shadows on the page should have a positive horizontal and vertical offset. Mixing shadow directions breaks the visual logic and makes an interface feel inconsistent.

Lower opacity at higher blur. A common mistake is keeping the same shadow opacity when increasing blur radius. As blur increases, the shadow should get lighter. If you increase blur from 4px to 20px, reduce opacity from 0.3 to around 0.12 to keep the same perceived shadow weight.

Avoid black at full opacity. Pure black (rgba(0, 0, 0, 1.0)) shadows look harsh and artificial. Shadows in photography are always partially transparent, often tinted slightly with the surrounding environment's color. Using rgba with 0.1 to 0.3 opacity produces shadows that look natural.

Pair with border-radius for modern cards. Box shadows look most intentional when the element also has a border-radius. Use the ToolHQ border radius generator to set corner rounding alongside your shadow for a cohesive card design.

Mini-story: Ana, a 31-year-old UI designer turned developer in São Paulo, was implementing her own designs. She had specified shadow values in Figma but was getting slightly different results in the browser due to how Figma renders shadows versus CSS rendering. She used the box shadow generator to adjust the values live in the browser until the shadow matched her intended design, then exported the corrected CSS. The generator made the browser-versus-Figma difference easy to resolve visually rather than numerically.

The CSS gradient generator pairs well with the box shadow generator when you are designing backgrounds and elevated surfaces. The CSS minifier reduces your final stylesheet size once the values are finalized.

---

Frequently asked questions

What is CSS box-shadow?

box-shadow is a CSS property that adds one or more shadow effects around an element's border. It takes values for horizontal and vertical offset, blur radius, spread radius, color, and an optional inset keyword for inner shadows.

Can I stack multiple shadows with box-shadow?

Yes. CSS allows multiple shadows on a single element by separating shadow values with commas: box-shadow: value1, value2. Stacked shadows are rendered from front to back, so the first value is on top.

What is an inset shadow?

An inset shadow appears inside the element's border box rather than outside it. Add the inset keyword before the other values: box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2). Inset shadows are commonly used for text inputs and recessed UI elements.

Does box-shadow affect page layout?

No. box-shadow is purely visual. Unlike border or padding, it does not affect the element's dimensions or the layout of surrounding elements. The shadow extends outside the element's normal space without displacing other elements.

How do I create a neumorphic (soft UI) shadow effect?

Neumorphism, also called soft UI, uses two box-shadow layers on an element that matches the background color: one dark shadow on the bottom-right and one light shadow on the top-left. This creates the illusion of the element being extruded from or recessed into the surface. A typical neumorphic card on a light grey (#e0e0e0) background looks like this:

background: #e0e0e0;
box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;

Key rules: the element background must match the page background, the dark shadow goes in the direction of the light source, and the light shadow goes opposite. Use the multi-layer shadow support in the generator to build this effect visually.

Is the generated CSS compatible with all browsers?

Yes. box-shadow has been fully supported in all major browsers since Internet Explorer 9. No vendor prefixes are needed in modern CSS.

---

The short version

A CSS box shadow generator makes it practical to design multi-layer shadows visually instead of writing and debugging values manually. ToolHQ's free generator offers sliders for all shadow parameters, multi-layer support, inset mode, and a live preview, producing copy-ready CSS in seconds.

Move the sliders, see the shadow, copy the property.

Build your CSS box shadow now

Combine with the border radius generator for complete card styling and the CSS gradient generator for background design. Browse all developer tools on ToolHQ.

---