What is a CSS Box Shadow Generator?
This box shadow generator helps you create `box-shadow` values with visual controls for offset, blur, spread, and color.
It removes trial-and-error by showing live depth changes and outputting copy-ready CSS.
How to use
- Select outer or inset shadow mode.
- Adjust horizontal and vertical offsets to define light direction.
- Tune blur and spread for softness and shadow size.
- Pick a color and set opacity for subtle or strong depth.
- Copy the CSS and apply it to cards, buttons, or containers.
Example usage
A low-opacity outer shadow works well for elevated cards. Inset shadows can create pressed inputs or tactile UI states.
Tips
- Prefer lower opacity for more natural shadows.
- Keep light direction consistent across components.
- Avoid excessive spread on small elements.
- Use one clean shadow first, then layer only if needed.
FAQ
- When should I use inset shadows?
- Use inset shadows when you want a surface to look pressed in or carved, such as input fields or recessed panels.
- What units does this tool output?
- Offsets, blur, and spread are generated in pixels for predictable results.
- Can I animate box-shadow?
- Yes, but keep animations minimal because heavy shadow transitions can impact performance on large pages.