Box Shadow Generator
Design CSS box-shadows with a live preview
About the Box Shadow Generator
The CSS box-shadow property packs five values plus a color into one line, and small changes to any of them completely change the feel of a shadow. This generator turns those numbers into sliders with a live preview, so you can dial in exactly the depth you want and read off the CSS.
You control horizontal and vertical offset, blur radius, spread radius, and a separate opacity slider that the tool folds into an rgba() shadow color — so you adjust transparency without editing hex codes by hand. An inset toggle flips the shadow inward for pressed or recessed effects, and a background color picker lets you preview the shadow against the surface it will actually sit on.
It is the go-to for building a subtle card elevation, a glowing focus ring, or the soft double-shadow look of neumorphic UI. Designers and developers use the preview to judge contrast before copying the box-shadow declaration straight into their stylesheet.
How to Use the Box Shadow Generator
- Drag the horizontal and vertical offset sliders to push the shadow left/right and up/down.
- Set the blur radius for softness and the spread radius to grow or shrink the shadow.
- Lower the opacity slider for a subtle shadow or raise it for a bold one.
- Pick the shadow color and a preview background color to check real-world contrast.
- Toggle "Inset shadow" if you want the shadow inside the box, then click "Copy CSS".
Why Use ToolForge’s Box Shadow Generator
- Pure client-side React: no upload, no account, and the emitted box-shadow is standard CSS that works in any project.
- The dedicated opacity slider is merged into an rgba() color for you, so you tune transparency without hand-editing alpha values.
- A configurable background behind the preview box reveals whether a pale shadow actually shows up on your real surface color.
- Inset support and spread control mean you can build pressed states and neumorphic shadows, not just simple drop shadows.
Frequently Asked Questions
What does spread radius do in a box-shadow?
Spread grows or shrinks the shadow before the blur is applied. A positive spread makes the shadow larger than the element, useful for glows; a negative spread pulls it in, which helps create shadows that only peek out from one side.
How do I make a soft, subtle shadow?
Use a small vertical offset, a generous blur radius, zero or slightly negative spread, and a low opacity around 10–20%. Large blur with low opacity reads as a gentle elevation rather than a hard outline.
What is an inset shadow used for?
An inset shadow renders inside the element instead of behind it, making the box look recessed or pressed in. It is common for input fields, toggled buttons, and the inner shadow half of a neumorphic design.
Can I stack multiple shadows?
CSS supports comma-separated multiple shadows, and full neumorphism uses a light and a dark one together. This tool builds one shadow at a time; copy two results and join them with a comma in your stylesheet to layer them.
