Skip to main content
The Stac BoxShadow class creates shadow effects for containers and other widgets. Multiple shadows can be combined for complex effects.

​
Properties

PropertyTypeDescription
colorString?Shadow color.
blurRadiusdouble?Blur radius in logical pixels.
offsetMap<String, dynamic>?Shadow offset with x and y values.
spreadRadiusdouble?Spread radius (positive expands, negative contracts).
blurStyleString?Blur style: normal, solid, outer, inner.

​
Example

StacContainer(
  decoration: StacBoxDecoration(
    color: StacColors.white,
    borderRadius: StacBorderRadius.all(12.0),
    boxShadow: [
      StacBoxShadow(
        color: StacColors.black,
        blurRadius: 10.0,
        offset: StacOffset(x: 0.0, y: 4.0),
        spreadRadius: 0.0,
      ),
    ],
  ),
  padding: StacEdgeInsets.all(16.0),
  child: StacText(data: 'Card with Shadow'),
)

​
Shadow with Opacity

For semi-transparent shadows, use color with alpha: 
StacContainer(
  decoration: StacBoxDecoration(
    color: StacColors.white,
    borderRadius: StacBorderRadius.all(8.0),
    boxShadow: [
      StacBoxShadow(
        color: '#26000000', // 15% opacity black
        blurRadius: 15.0,
        offset: StacOffset(x: 0.0, y: 8.0),
        spreadRadius: -2.0,
      ),
    ],
  ),
  child: StacText(data: 'Subtle Shadow'),
)

​
Multiple Shadows

Combine multiple shadows for depth effects: 
StacContainer(
  decoration: StacBoxDecoration(
    color: StacColors.white,
    borderRadius: StacBorderRadius.all(16.0),
    boxShadow: [
      // Ambient shadow
      StacBoxShadow(
        color: '#1A000000',
        blurRadius: 20.0,
        offset: StacOffset(x: 0.0, y: 2.0),
        spreadRadius: 0.0,
      ),
      // Key shadow
      StacBoxShadow(
        color: '#33000000',
        blurRadius: 10.0,
        offset: StacOffset(x: 0.0, y: 6.0),
        spreadRadius: -4.0,
      ),
    ],
  ),
  padding: StacEdgeInsets.all(24.0),
  child: StacText(data: 'Elevated Card'),
)

​
Colored Shadows

StacContainer(
  decoration: StacBoxDecoration(
    gradient: StacGradient.linear(
      colors: [StacColors.purple, StacColors.blue],
      begin: StacAlignment.topLeft,
      end: StacAlignment.bottomRight,
    ),
    borderRadius: StacBorderRadius.all(16.0),
    boxShadow: [
      StacBoxShadow(
        color: '#662196F3', // Blue shadow with 40% opacity
        blurRadius: 20.0,
        offset: StacOffset(x: 0.0, y: 10.0),
        spreadRadius: 0.0,
      ),
    ],
  ),
  padding: StacEdgeInsets.all(24.0),
  child: StacText(
    data: 'Colorful Shadow',
    style: StacTextStyle(color: StacColors.white),
  ),
)

​
Elevation Levels

Common elevation patterns based on Material Design:
LevelBlur RadiusOffset YSpreadUse Case
12.01.00.0Cards
24.02.00.0Buttons
38.04.00.0FAB
412.06.00.0Navigation drawer
516.08.00.0Modal bottom sheet
// Elevation 2 (like a raised button)
StacContainer(
  decoration: StacBoxDecoration(
    color: StacColors.white,
    borderRadius: StacBorderRadius.all(8.0),
    boxShadow: [
      StacBoxShadow(
        color: '#33000000',
        blurRadius: 4.0,
        offset: StacOffset(x: 0.0, y: 2.0),
      ),
    ],
  ),
  child: StacText(data: 'Elevation 2'),
)