Box Shadow Generator Guide: How to Create Clean CSS Shadows for Modern UI
Quick Answer
- Use a box shadow generator to adjust offset, blur, spread, opacity and color visually.
- For modern UI, start with low-opacity shadows and a larger blur radius.
- Layer two subtle shadows instead of using one dark, heavy shadow.
- Test the result on cards, buttons, menus and different background colors before copying the CSS.
A clean box shadow can make a card feel elevated, separate a dropdown from the page or give a button clearer visual importance. A poorly chosen shadow can make the same interface look blurry, dated or inconsistent.
This guide explains how each CSS shadow value works, how to create shadows visually and which settings are suitable for common modern UI components.
In This Guide
What Is the CSS Box-Shadow Property?
The CSS box-shadow property adds one or more shadow effects around an element. A basic declaration follows this order:
box-shadow: offset-x offset-y blur-radius spread-radius color;For example:
box-shadow: 0 8px 24px rgb(15 23 42 / 12%);What Each Box-Shadow Value Controls
| Value | What it changes | Practical effect |
|---|---|---|
| Offset X | Moves the shadow horizontally | Positive moves right; negative moves left |
| Offset Y | Moves the shadow vertically | Positive moves down; negative moves up |
| Blur radius | Softens the shadow edge | Higher values create a softer, wider shadow |
| Spread radius | Expands or contracts the shadow | Negative values make it tighter |
| Color and opacity | Controls tone and intensity | Transparent dark colors usually look more natural |
| Inset | Places the shadow inside the element | Useful for inputs, pressed buttons and recessed surfaces |
Simple modern starting point
Keep horizontal offset near zero, use a small downward offset, increase the blur and lower the opacity. This creates elevation without making the element look outlined or dirty.
How to Use a Box Shadow Generator
CSSPeek’s free Box Shadow Lab lets you build and preview layered shadows visually before copying the CSS.
Choose the component background
A shadow that looks clean on white may disappear on grey or look too strong on dark backgrounds. Match the preview to the real interface.
Set the direction
Start with an X offset of 0 and a small positive Y offset. This makes the light source feel as though it is positioned above the component.
Adjust blur and spread
Increase blur for softness. Use a small negative spread when the shadow extends too far around the sides of the component.
Lower the opacity
Begin around 6% to 14% opacity for neutral UI shadows. Increase it only when the element needs stronger elevation.
Add a second layer
Combine a tight shadow for edge definition with a larger, softer shadow for depth. Copy the finished comma-separated CSS.
CSSPeek Box Shadow Lab
Build a clean layered shadow without guessing the values.
Adjust each layer visually, preview the result on a real component and copy production-ready CSS when the shadow looks right.
Open Box Shadow Lab →Clean CSS Box-Shadow Examples for Modern UI
1. Subtle card shadow
box-shadow:
0 1px 2px rgb(15 23 42 / 6%),
0 8px 24px rgb(15 23 42 / 8%);Use this for dashboard cards, pricing panels and content blocks that need gentle separation from the page.
2. Dropdown or floating menu
box-shadow:
0 4px 6px -4px rgb(15 23 42 / 10%),
0 14px 28px -8px rgb(15 23 42 / 18%);The larger second layer gives menus enough elevation to appear above surrounding content.
3. Primary button shadow
box-shadow: 0 6px 16px rgb(79 70 229 / 28%);Using a transparent version of the button color can feel more natural than adding a neutral black shadow.
4. Input field inset shadow
box-shadow: inset 0 1px 2px rgb(15 23 42 / 10%);A restrained inset shadow can help an input look recessed without replacing its visible focus state.
How to Inspect Box Shadows on Live Websites
Generators help you create new shadows, but real websites are useful references for seeing how experienced product teams apply depth to cards, modals and navigation menus.
With the free CSSPeek Chrome extension, you can click an element and review the computed styles that actually apply without searching through a long DevTools panel.
1. Find a card, modal or menu with a shadow you like.
2. Activate CSSPeek and click the element.
3. Review the computed shadow, background and border-radius.
4. Recreate the effect in Box Shadow Lab.
5. Adjust the values for your own color system and elevation scale.
See all available CSSPeek inspection features or compare the focused workflow with Chrome DevTools.
Create a Consistent UI Shadow Scale
Avoid choosing a completely new shadow for every component. Define a small elevation scale and reuse it across the product.
| Level | Typical components | Visual strength |
|---|---|---|
| Low | Cards and form controls | Tight and subtle |
| Medium | Dropdowns and sticky controls | Soft but clearly elevated |
| High | Modals, popovers and floating panels | Wide blur and stronger separation |
Common Box-Shadow Mistakes
- Using fully opaque black instead of a transparent shadow color.
- Adding a large spread that makes the component look outlined.
- Using different light directions across the same interface.
- Making every card look highly elevated.
- Copying a shadow without testing it against your own background.
- Using shadow alone for keyboard focus instead of a clear focus outline or ring.
Build the shadow, preview every layer and copy the CSS.
Use CSSPeek Box Shadow Lab to create clean card, button, dropdown and modal shadows without repeatedly editing values in your stylesheet.
Try the Box Shadow Generator →Frequently Asked Questions
What is a box shadow generator?
A box shadow generator is a visual tool that lets you adjust CSS shadow values, preview the result and copy the finished declaration.
What is the correct CSS box-shadow order?
The common order is horizontal offset, vertical offset, blur radius, spread radius and color. The optional inset keyword creates an inner shadow.
How do I create multiple box shadows?
Add multiple shadow definitions separated by commas. The first shadow is painted above the shadows listed after it.
Does box-shadow affect element size?
No. A box shadow is drawn around the element but does not change its calculated box-model dimensions.
How can I make a box shadow look modern?
Use low opacity, a soft blur, limited spread and consistent direction. Layering two subtle shadows often looks cleaner than one dark shadow.