Flutter Shadow Generator

Build a shadow visually and copy it as a ready-to-use Flutter BoxShadow widget.

Offset X (0px)

Offset Y (8px)

Blur (24px)

Spread (0px)

Colour

Opacity (18%)

Preview

Code

BoxShadow(
  color: Color.fromARGB(46, 21, 23, 28),
  offset: Offset(0, 8),
  blurRadius: 24,
  spreadRadius: 0,
)

Ad space — always below the tool, never inside it

How to use flutter shadow generator

1Adjust the slidersSet offset, blur, spread, colour and opacity.

2Preview on light or darkSwitch the preview background to check how it looks either way.

3Copy the Flutter codeCopy the ready-to-use BoxShadow widget into your boxDecoration.

Paste it into the boxShadow list of a BoxDecoration, typically inside a Container's decoration property.

Flutter's BoxShadow takes an Offset object combining X and Y into one value, which this tool generates for you automatically.