FlowToolkit
Utility

Box Shadow Generator

Design and preview CSS box shadows with ease.

Loading tool…

About this tool

Create single or multiple box shadows with interactive controls for offset, blur, spread, color, and inset. Preview the result on a live box and copy the CSS code instantly.

Designing shadows with precision

CSS box shadows are a surprisingly expressive tool. With just offset, blur, spread, colour, and inset, you can suggest elevation, depth, focus, and material texture. A single shadow can create a subtle hover cue; layered shadows can simulate realistic multiple-light-source environments.

This tool gives you full control over every parameter with live preview. Toggle inset to switch between drop shadows and inner shadows, and stack multiple shadows to build complex effects that are tedious to code by hand.

Understanding the parameters

  • Offset X / Y — move the shadow right/down (positive) or left/up (negative).
  • Blur — controls softness. Zero produces a sharp shadow; higher values spread the shadow edge.
  • Spread — expands (positive) or contracts (negative) the shadow size from the element bounds.
  • Inset — renders the shadow inside the element for a recessed effect.

Frequently asked questions

Can I create multiple shadows?

Yes. Add up to 5 shadows on a single element. Each shadow has its own offset, blur, spread, color, and inset settings.

What is the difference between blur and spread?

Blur controls how soft or sharp the shadow edge appears. Spread expands or contracts the shadow size without affecting blur.

What does inset do?

Inset renders the shadow inside the element, creating a recessed or pressed-in effect, commonly used for neumorphism and inner depth.