CSS Box Shadow Generator
Build and preview CSS box shadows with offset, blur, spread, and color controls.
What is CSS Box Shadow Generator?
CSS Box Shadow Generator lets you visually design box shadows by adjusting offset, blur radius, spread radius, and color.
See a live preview and copy the finished box-shadow CSS property value.
Parameter reference
- Horizontal offset: positive shifts shadow right, negative shifts left.
- Vertical offset: positive shifts shadow down, negative shifts up.
- Blur radius: higher values produce a more diffuse, softer shadow.
- Spread radius: positive expands the shadow size; negative contracts it.
- Color: use rgba for transparency (e.g.
rgba(0,0,0,0.2)). - Inset: makes the shadow appear inside the element rather than outside.
Notes
- Multiple shadows can be layered by separating values with commas in CSS.
- Box shadow does not affect layout — it is purely visual.
- Use
filter: drop-shadow()for shadows on non-rectangular elements like PNG images.
FAQ
- What is the difference between blur and spread?
- Blur softens the shadow's edge. Spread changes the size of the shadow before blurring. A spread of 0 with high blur produces a soft glow; a high spread with low blur produces a hard, extended shadow.
- How do I create a subtle elevation shadow like Material Design?
- Use a low-opacity black with a slight vertical offset and moderate blur, e.g.
0 2px 8px rgba(0,0,0,0.15). Layer multiple shadows of different sizes for more realistic depth. - Does box-shadow affect performance?
- Box shadows are GPU-accelerated in modern browsers and have minimal performance impact. Animating box shadows can be slower — prefer animating
opacityortransformfor smooth transitions.
Overview
Design CSS box shadows visually with offset, blur, spread, color, and opacity controls, then copy the resulting CSS. Useful for cards, modals, and depth effects.
How to use
- Adjust horizontal and vertical offsets.
- Tune blur, spread, color, and opacity while watching the preview.
- Copy the generated box-shadow CSS into your project.
Examples
-
Card elevation
Input: 0px / 4px offset, 12px blur, low opacity
Output: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-
Focus glow
Input: 0 offset, large blur, brand color
Output: A soft colored glow for highlighted elements.
Notes
- Box shadows are purely visual and do not affect layout.
- Animating box-shadow can be slow; prefer animating opacity or transform.
- Subtle shadows with low opacity usually look more natural than dark, hard ones.
FAQ
- What does the spread value do?
- Positive spread expands the shadow in every direction before blur is applied; negative spread shrinks it.
- Can I layer multiple shadows?
- Yes. CSS accepts comma-separated shadows. Generate each layer here and combine them manually.
- Do shadows hurt performance?
- Static shadows are GPU-accelerated and cheap. Heavy animated shadows are the main thing to avoid.
Embed this tool
Paste this iframe into any HTML page to embed CSS Box Shadow Generator on your site: