Key takeaways
- 01Every box-shadow parameter has its own slider plus a numeric input for pixel-precision tuning.
- 02Inset toggle switches between drop shadow and inner shadow for pressed or neumorphic effects.
- 03Color and opacity are controlled separately, outputting rgba() for readable CSS.
- 04The preview uses the real CSS property on a real element — what you see is exactly what your stylesheet renders.
Why Use a Visual Box-Shadow Generator
CSS box-shadow takes up to six values — horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. Typing them from memory works for simple shadows, but for anything more nuanced — a tight glow, a deep drop shadow, a soft elevation layer — you're guessing and reloading until something looks right.
A visual generator collapses that iteration loop. Move a slider, see the change instantly, and copy only when you're satisfied. Handytool's box-shadow generator runs entirely in your browser, so the preview is the real CSS property applied to a real element — no rendering differences between the tool and your actual page.
How to Design a Box Shadow
- 01
Adjust the horizontal and vertical offsets
Positive values move the shadow right and down. Negative values move it left and up. A centered shadow (0, 0) creates a glow effect.
- 02
Set the blur radius
Higher blur values create softer, more diffuse shadows. Zero blur produces a hard, solid shadow outline.
- 03
Adjust the spread radius
Positive spread enlarges the shadow before blurring. Negative spread shrinks it, which is useful for tight under-element shadows.
- 04
Pick a color and opacity
Use the color picker to choose the shadow hue, then dial down opacity for subtlety. The output uses rgba() to keep the values readable.
- 05
Toggle inset if needed
Inset switches from a drop shadow to an inner shadow — useful for pressed buttons, sunken inputs, and neumorphic surfaces.
- 06
Copy the CSS declaration
Click Copy to grab the full box-shadow value and paste it into your stylesheet.
No Upload, No Account
The generator is entirely client-side. Your color choices, numeric values, and preview states stay in your browser — nothing is sent to a server. There's no account to create and no usage limit.
Because the preview element uses the actual CSS box-shadow property, the output is accurate by definition — there's no canvas rendering or screenshot approximation involved. The pixel values you copy are the pixel values the browser applies.
Box-Shadow Generator FAQ
What does the spread value do?
Positive spread enlarges the shadow in all directions before blur is applied; negative spread shrinks it. Useful for tight, defined glows when paired with low blur.
Can I add multiple box shadows?
This generator outputs one shadow at a time. To layer them, copy the value and separate multiple shadows with commas in your CSS — box-shadow accepts a comma-separated list.
Why is my inset shadow invisible?
Inset shadows draw inside the element, so they need a background color or visible padding to show. They won't appear on transparent or zero-sized elements.
Is the preview pixel-accurate?
Yes — the preview uses the actual CSS box-shadow property on a real DOM element, so what you see is exactly what your stylesheet will produce.
What is a neumorphic shadow?
Neumorphism uses two shadows — one light and one dark — offset in opposite directions to make an element appear raised or pressed from a flat surface. Both shadows are typically inset for the pressed variant.