About flutter shadow generator
Flutter draws shadows with the BoxShadow class inside a BoxDecoration. This tool builds the shadow visually and gives you the code to paste.
The BoxShadow fields
- color: the shadow colour, normally black with a low alpha.
- offset: Offset(x, y) moves the shadow.
- blurRadius and spreadRadius: softness and size.
Tips
Use a small blur and offset for small elements and larger values for floating panels. For standard Material elevation, the Material or Card widget can produce shadows for you using the elevation property.
A worked example
A typical card in Flutter uses BoxShadow(color: Color(0x1F000000), offset: Offset(0, 4), blurRadius: 12). The colour 0x1F000000 is black at about 12% opacity. Place it in the boxShadow list of a BoxDecoration on a Container.
Tips
- Flutter's blurRadius is roughly twice the CSS blur sigma, so values may look different from a web design.
- Several shadows can go in the same list to build a layered effect.
- For standard Material elevation use the elevation property on Card or Material instead.
