CSS Box Shadow Generator — Free 2026
Create beautiful CSS box shadows with a visual editor. Adjust offset, blur, spread, color and opacity in real time and copy the code.
Preview
CSS Code
How It Works
- Adjust shadow properties
- Preview the shadow
- Copy the CSS
Mastering CSS Box Shadows
The CSS box-shadow property is one of the most versatile tools for adding depth and visual hierarchy to web designs. From subtle card elevations to dramatic glow effects, box shadows can transform a flat interface into one that feels layered and polished. This free generator gives you full control over every parameter with instant visual feedback.
Anatomy of a Box Shadow
The box-shadow property accepts the following values in order: an optional inset keyword, horizontal offset, vertical offset, blur radius, spread radius, and color. The horizontal offset moves the shadow right (positive) or left (negative). The vertical offset moves it down (positive) or up (negative). Blur radius controls the softness — higher values create a more diffused shadow. Spread radius expands (positive) or contracts (negative) the shadow from the element's edges. Using rgba() colors with low opacity creates natural-looking shadows that work on any background.
Design Best Practices
Modern UI design favors subtle, layered shadows that mimic natural lighting. A common approach is to combine two shadows: a large, soft shadow for ambient light (0 8px 24px rgba(0,0,0,0.08)) and a small, tight shadow for direct light (0 2px 4px rgba(0,0,0,0.06)). For hover states, increase the vertical offset and blur to suggest the element is lifting off the page. Pair box shadows with the CSS gradient generator for complete visual styling, or use the HEX to RGB converter to get the right color values.
Common Shadow Presets
Material Design uses five elevation levels, each with progressively stronger shadows. Level 1 is 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) for buttons and cards. Level 5 is 0 19px 38px rgba(0,0,0,0.3), 0 15px 12px rgba(0,0,0,0.22) for modals and dialogs. Apple's design system uses even subtler shadows with blue-tinted colors and larger blur radii. Experiment with the sliders above to find the perfect shadow for your design system.
Frequently Asked Questions
The CSS box-shadow property adds one or more shadow effects around an element's frame. It accepts values for horizontal offset, vertical offset, blur radius, spread radius, and color. You can create outer shadows (default) or inner shadows using the inset keyword. Multiple shadows can be comma-separated for layered effects.
For a subtle, natural shadow, use a small vertical offset (2-4px), moderate blur (8-16px), zero spread, and a low-opacity black color like rgba(0,0,0,0.1). Example: box-shadow: 0px 4px 12px rgba(0,0,0,0.1). This mimics a natural light source from above and works well for card and button designs.
Yes. CSS allows multiple box-shadow values separated by commas. This technique is used to create layered depth effects, with a larger, softer shadow for ambient light and a smaller, sharper shadow for direct light. Example: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08).
box-shadow applies a rectangular shadow to the element's box model (including padding and border). The filter: drop-shadow() function applies a shadow that follows the element's actual rendered shape, including transparent areas. Use drop-shadow for images with transparency (like PNGs) and box-shadow for cards, buttons, and rectangular elements.
Comments