Visual Box-Shadow · 6 parameters · Real‑time preview · 5 presets · One‑click copy CSS
Box-Shadow is one of the most used CSS3 visual effects, adding depth and dimension to web elements. ng.cc's online CSS shadow generator provides an intuitive interface to adjust horizontal offset, vertical offset, blur radius, spread radius, color, and opacity with real‑time preview. It includes 5 production‑ready presets and one‑click CSS copy – an essential tool for frontend developers and UI designers.
X/Y offset, blur, spread, color, opacity. Negative offsets create top/left shadows; negative spread creates inset‑like effects.
Drag sliders for quick adjustments or type exact values. Real‑time sync for both rapid prototyping and pixel‑perfect design.
Soft, Card, Deep, Neon, None. Covers card design, button states, neon glows, and more.
The CSS code updates instantly with every parameter change, including the full box-shadow declaration – ready to copy and use.
| Parameter | Range | Description | Example |
|---|---|---|---|
| Horizontal offset | -50 ~ 50px | Positive = right, negative = left | 5px right shadow |
| Vertical offset | -50 ~ 50px | Positive = down, negative = up | -5px top shadow |
| Blur radius | 0 ~ 100px | Larger value = softer edge | 10px soft shadow |
| Spread radius | -20 ~ 20px | Positive expands shadow, negative shrinks | -2px inset effect |
| Color | HEX | Any color | #4EC9B0 brand color |
| Opacity | 0 ~ 1 | 0 fully transparent, 1 fully opaque | 0.3 semi‑transparent |
Use two shadows: box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 4px 20px rgba(0,0,0,0.05);. The first gives closeness, the second gives lift.
Use brand color + high blur + zero offset: box-shadow: 0 0 20px 5px #4EC9B0;. Works best on dark backgrounds.
Add the inset keyword manually to the generated CSS. Example: box-shadow: inset 0 4px 10px rgba(0,0,0,0.2);. We plan to add an inset toggle in v2.0.
inset to the generated CSS, e.g., box-shadow: inset 0 4px 10px rgba(0,0,0,0.2);. An inset toggle is planned for version 2.0.
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);. You can use this tool to generate the first layer and then append more.
5px 0 0 0 #000 gives a sharp 5px line on the right. For soft single‑side shadows, negative spread or pseudo‑elements are needed – not currently supported.
box-shadow is a CSS3 standard, fully supported in all modern browsers (Chrome, Firefox, Safari, Edge) without prefixes. IE9+ supports it (IE9 needs -ms- prefix). The standard syntax generated here works in 99% of production environments.
0 0 0 -2px #000 creates a border‑like stroke without affecting layout.
This shadow generator is part of the ng.cc design toolkit. You might also like:
⚡ All shadow calculations are done locally in your browser – zero data upload.