Flutter BoxShadow Generator
Compose a Flutter BoxShadow without manually converting opacity to an alpha byte. Enter an opaque six-digit HEX color and a separate opacity, then choose blurRadius, spreadRadius and the horizontal and vertical offset. The generator rounds opacity to an eight-bit alpha channel and emits a Color(0xAARRGGBB) literal. The result is one BoxShadow expression, ready to place inside the boxShadow list of a BoxDecoration. No CSS approximation is required to generate the Dart code. Review the surrounding decoration and clipping rules before assuming the shadow will be visible.
Your workspace
Runs locally in your browserResult
Your input is processed locally in your browser unless explicitly stated otherwise. Inputs are not saved by this tool.
How to use this tool
Enter a six-digit HEX color, opacity from zero to one, and shadow dimensions. Generate and copy the BoxShadow expression.
Example
Input
#000000, opacity 0.2, blur 12, spread 0, offset (0, 4)Output
BoxShadow(
color: const Color(0x33000000),
blurRadius: 12,
spreadRadius: 0,
offset: Offset(0, 4),
)What does this tool do?
Blur softens the edge of the shadow; it must not be negative. Spread expands the shadow shape before blurring, and a negative spread contracts it. Positive offsetX moves right and positive offsetY moves down. An offset does not move the widget itself. Start with a small opacity and inspect the shadow against both light and dark backgrounds rather than assuming a fixed value works everywhere.
Common mistakes and limitations
An opacity of 0.2 becomes alpha 51, hexadecimal 33, because 0.2 multiplied by 255 is 51. Values not exactly representable in eight bits are rounded. Fully transparent shadows still have geometry but no visible color. This tool supports #RRGGBB input only; use the Flutter Color Converter for broader color parsing or to inspect existing ARGB literals.
Frequently asked questions
Why is the alpha prefix before the color?
Flutter integer colors use AARRGGBB, unlike CSS eight-digit HEX which commonly puts alpha last.
Related tools
Flutter Color Converter
Convert HEX and RGB to Flutter ARGB color literals.
Open tool Flutter & Dart ToolsFlutter BorderRadius Generator
Generate circular or per-corner Flutter BorderRadius expressions.
Open tool Flutter & Dart ToolsFlutter EdgeInsets Generator
Generate Flutter EdgeInsets.all, symmetric, only and fromLTRB expressions.
Open tool Encoding & ConversionColor Converter
Convert HEX, RGB and HSL colors with a live preview.
Open tool