Box Shadow Generator

About this tool

A box shadow can make a card feel raised, separate a dialog from the page, or add a subtle border-like edge without another element. The difficult part is balancing horizontal offset, vertical offset, blur, spread, color and opacity so the shadow looks intentional rather than muddy. The Box Shadow Generator gives you a live preview while you adjust every value and produces a complete box-shadow declaration ready for your stylesheet.

Use a small blur and low opacity for restrained interface shadows, a wider blur for floating panels, or enable inset for pressed controls and inner depth. Test the result on both light and dark surfaces before publishing because the same shadow can look very different against another background. For text effects, use the Text Shadow Generator; for shape styling, pair this tool with the Border Radius Generator.

How to use it

1. Set the horizontal and vertical offsets to control the direction of the shadow.
2. Increase blur for a softer edge, then use spread to enlarge or tighten the shadow footprint.
3. Choose a color and reduce opacity until the shadow supports the design without overpowering it.
4. Enable inset when you need an inner shadow rather than an outer one.
5. Copy the generated CSS and test it on the actual component and background used by your site.

Useful ways to apply it

• Creating consistent elevation for cards, dropdowns, modals and sticky headers.
• Adding a subtle focus or hover effect without changing an element's dimensions.
• Designing inset shadows for form controls, pressed buttons and recessed panels.
• Matching a design reference by adjusting blur, spread and alpha independently.
• Producing a clean starting value for a reusable CSS design token.