CSS Box Shadow Generator: 25 Ready-to-Use Shadow Examples

July 21, 2026

Box Shadow

Quick Answer

Use the free CSSPeek Box Shadow Lab to adjust offsets, blur, spread, color and multiple shadow layers visually.
Copy any of the 25 ready-to-use box-shadow examples below.
Use subtle shadows for cards and inputs, stronger layered shadows for modals, and colored glows only for selected actions.
Test the shadow on the real background because the same CSS can look different on white, gray and dark surfaces.

A CSS box shadow generator removes the guesswork from offsets, blur, spread and opacity. But when you need something quickly, starting with a proven preset is often faster than building a shadow from zero.

The examples below cover cards, buttons, dropdowns, modals, navigation, dark interfaces, inset controls and decorative glows. Copy the closest option, then fine-tune it inside CSSPeek’s visual generator.

CSS Box Shadow Facts

4 Things to Know Before Copying a Shadow

July 2015

Widely available

MDN marks box-shadow as broadly supported across browsers since July 2015.

2 Required

Offset values

Every shadow needs horizontal and vertical offset values.

4 Lengths

Maximum syntax

The values can represent X offset, Y offset, blur and spread.

1+ Layers

Comma-separated

Multiple shadows can be stacked in one declaration using commas.

Jump to a Shadow Style

Syntax Subtle Shadows Buttons Panels and Modals Layered Shadows Inset and Glows Selection Guide FAQs

CSS Box Shadow Syntax Explained

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

Value	Controls
`offset-x`	Moves the shadow left or right.
`offset-y`	Moves the shadow up or down.
`blur`	Controls softness. It cannot be negative.
`spread`	Expands or contracts the shadow shape.
`color`	Sets the color and opacity.
`inset`	Moves the shadow inside the element.

For a deeper walkthrough of every control, read the Box Shadow Generator Guide.

How to use the examples

Copy only the box-shadow declaration. Apply it to a card, button, input, modal or any other block-level element in your stylesheet.

1–5. Subtle Shadows for Clean Interfaces

Use these when an element needs separation without looking visibly elevated.

1. Hairline Shadow

box-shadow: 0 1px 2px
  rgb(0 0 0 / 0.06);

2. Soft Card

box-shadow: 0 2px 8px
  rgb(15 23 42 / 0.08);

3. Floating Card

box-shadow: 0 4px 14px
  rgb(15 23 42 / 0.08);

4. Bordered Card

box-shadow:
  0 0 0 1px rgb(15 23 42 / .06),
  0 2px 5px rgb(15 23 42 / .06);

5. Soft Bottom Lift

box-shadow: 0 8px 24px -12px
  rgb(15 23 42 / 0.28);

6–10. Button and Interactive-Control Shadows

These add feedback and emphasis without turning every button into a glowing object.

6. Primary Button

box-shadow: 0 4px 8px
  rgb(79 70 229 / 0.28);

7. Strong CTA

box-shadow: 0 6px 14px -4px
  rgb(17 24 39 / 0.5);

8. Secondary Button

box-shadow:
  0 1px 2px rgb(0 0 0 / .12),
  0 3px 6px rgb(0 0 0 / .08);

9. Pressed Button

box-shadow: inset 0 2px 4px
  rgb(15 23 42 / 0.18);

10. Focused CTA

box-shadow:
  0 0 0 4px rgb(6 182 212 / .18),
  0 8px 18px rgb(8 145 178 / .25);

11–15. Dropdown, Navigation and Modal Shadows

Overlays normally need stronger separation because they sit above other content.

11. Dropdown Menu

box-shadow:
  0 10px 25px -5px rgb(15 23 42 / .12),
  0 8px 10px -6px rgb(15 23 42 / .10);

12. Modal Window

box-shadow: 0 24px 60px -12px
  rgb(15 23 42 / 0.30);

13. Tooltip

box-shadow: 0 6px 20px
  rgb(0 0 0 / 0.32);

14. Sidebar

box-shadow: 12px 0 28px -16px
  rgb(15 23 42 / 0.35);

15. Sticky Navigation

box-shadow: 0 6px 20px -12px
  rgb(15 23 42 / 0.35);

16–20. Layered Shadows for Realistic Depth

Layered shadows combine a small contact shadow with a wider ambient shadow. Learn the full technique in the Multiple Box Shadow CSS guide.

16. Balanced Layers

box-shadow:
  0 1px 2px rgb(0 0 0 / .08),
  0 4px 12px rgb(0 0 0 / .08);

17. Medium Elevation

box-shadow:
  0 2px 4px rgb(15 23 42 / .08),
  0 12px 28px -8px rgb(15 23 42 / .20);

18. High Elevation

box-shadow:
  0 2px 3px rgb(15 23 42 / .10),
  0 10px 20px rgb(15 23 42 / .10),
  0 24px 48px -16px rgb(15 23 42 / .25);

19. Ambient Shadow

box-shadow:
  0 1px 1px rgb(0 0 0 / .04),
  0 4px 8px rgb(0 0 0 / .05),
  0 16px 32px rgb(0 0 0 / .06);

20. Colored Ambient

box-shadow:
  0 2px 5px rgb(30 64 175 / .08),
  0 18px 38px -10px rgb(59 130 246 / .28);

21–25. Inset, Neumorphic and Glow Effects

Use these selectively. Decorative effects lose impact when applied to every card or control.

21. Inset Input

box-shadow: inset 0 1px 3px
  rgb(15 23 42 / 0.18);

22. Light Neumorphism

box-shadow:
  9px 9px 18px #c5c7ca,
  -9px -9px 18px #ffffff;

23. Dark Neumorphism

box-shadow:
  8px 8px 16px #111827,
  -8px -8px 16px #374151;

24. Cyan Neon Glow

box-shadow:
  0 0 8px rgb(34 211 238 / .70),
  0 0 28px rgb(34 211 238 / .45);

25. Dual-Color Glow

box-shadow:
  -8px 0 24px rgb(168 85 247 / .38),
  8px 0 24px rgb(59 130 246 / .38);

Free CSS Tool

Need a shadow that is not in the list?

Build a single or multi-layer shadow visually, compare it on different backgrounds and copy production-ready CSS.

Open CSSPeek Box Shadow Lab

Which Box Shadow Should You Use?

Element	Start With	Avoid
Standard card	Examples 2–4	Heavy black shadows
Primary button	Examples 6–10	Large blur on every state
Dropdown	Example 11	No separation from content
Modal	Examples 12 or 18	A card-level shadow
Dark interface	Examples 23–25	Low-contrast black shadow only

To discover a shadow already used on a live website, follow CSSPeek’s guide to finding fonts, colors, spacing and shadows.

You can also run the Site Style Report to extract complete layered shadow strings from a public website’s stylesheets.

5 Rules for Better CSS Shadows

Match the elevation. Modals need stronger separation than ordinary cards.
Use transparency. Semi-transparent colors adapt better across nearby backgrounds.
Layer gently. Two subtle layers usually look more natural than one dense black blur.
Keep direction consistent. Shadows across one interface should appear to share the same light source.
Inspect the final element. Border radius, background color and surrounding contrast all affect the result.

When you find a useful effect on another website, use the one-click CSS copying workflow rather than rebuilding a multi-layer value manually.

Frequently Asked Questions

What is a CSS box shadow generator?

It is a visual tool that lets you adjust horizontal offset, vertical offset, blur, spread, color, opacity and inset settings while previewing the generated CSS.

How do I create multiple box shadows?

Place each shadow layer in the same box-shadow declaration and separate the layers with commas. The first declared shadow is painted on top.

Can box-shadow use negative values?

Offsets and spread can be negative. Blur radius cannot be negative. A negative spread contracts the shadow before blur is applied.

What does inset do in box-shadow?

The inset keyword renders the shadow inside the element instead of outside it. It is commonly used for pressed buttons, wells and form fields.

Does border-radius affect box-shadow?

Yes. The shadow follows the rounded shape of an element when border-radius is applied.

Should I animate box-shadow on hover?

Small shadow changes can work well. Keep the transition restrained and pair it with a slight transform instead of making blur and spread change dramatically.

Do I still need browser prefixes for box-shadow?

Modern browsers support the standard unprefixed box-shadow property. Prefixes are generally unnecessary for current browser targets.

Create, copy and inspect better shadows.

Start with one of the 25 presets, customize it in Box Shadow Lab, then use CSSPeek to inspect how the final shadow renders on a real page.

Generate a CSS Box Shadow

Sources and Research Notes

MDN box-shadow syntax, values and browser availability.
MDN Box Shadow Generator documentation.
Competitor research included CSS Scan, CSSmatic, Josh Comeau’s Shadow Palette Generator and other visual shadow tools.
The 25 CSS presets were independently prepared and organized by practical interface use case.

Share:X / Twitter LinkedIn Hacker News