a:outerShdw (Outer Shadow)

Description

\:outerShdw\ applies an outer shadow effect to DrawingML shapes and other graphical elements. It is defined in ECMA-376 Part 1 §20.1.8.18.

The shadow appears outside the shape boundary creating depth and emphasis. Shadow properties control:

• Blur radius: How soft/diffused the shadow edges are
• Distance: How far shadow extends from shape boundary
• Direction: Angle at which shadow projects (0° = right, 90° = down)
• Alignment: Where shadow originates (top-left, center, bottom-right)
• Color & Opacity: Shadow appearance and transparency
• Rotation: Whether shadow rotates with the shape

Outer shadows are essential for:

• Creating visual depth and separation
• Improving shape emphasis and hierarchy
• Adding professional polish to presentations
• Creating elevation effects in material design
• Highlighting important elements

Shadows render consistently across Office applications and support complex transformations.

Attributes

Content Model

\:outerShdw\ contains exactly one color element specifying shadow color:

• \:srgbClr: RGB color for shadow
• \:schemeClr: Theme color for shadow
• \:hslClr: HSL color for shadow
• \:sysClr: System color for shadow

Child Elements Table

Examples

Simple Black Outer Shadow

<a:outerShdw blurRad=\"38100\" dist=\"38100\" dir=\"2700000\" algn=\"tl\" rotWithShape=\"0\">
  <a:srgbClr val=\"000000\">
    <a:alpha val=\"50000\"/>
  </a:srgbClr>
</a:outerShdw>

using DocumentFormat.OpenXml.Drawing;

var shadow = new OuterShadow
{
    BlurRadius = 38100,
    Distance = 38100,
    Direction = 2700000,  // 90 degrees down
    Alignment = RectangleAlignmentValues.TopLeft,
    RotateWithShape = false
};

var color = new RgbColorModelHex { Val = \"000000\" };
color.Append(new Alpha { Val = 50000 });  // 50% opacity
shadow.Append(color);

Soft Blurred Shadow with Center Alignment

<a:outerShdw blurRad=\"76200\" dist=\"50800\" dir=\"5400000\" algn=\"ctr\" rotWithShape=\"1\">
  <a:srgbClr val=\"4A4A4A\">
    <a:alpha val=\"40000\"/>
  </a:srgbClr>
</a:outerShdw>

var shadow = new OuterShadow
{
    BlurRadius = 76200,      // More blur
    Distance = 50800,        // Farther from shape
    Direction = 5400000,     // 135 degrees (diagonal)
    Alignment = RectangleAlignmentValues.Center,
    RotateWithShape = true   // Rotate with shape
};

var color = new RgbColorModelHex { Val = \"4A4A4A\" };
color.Append(new Alpha { Val = 40000 });  // 40% opacity
shadow.Append(color);

Colored Shadow with Theme Color

<a:outerShdw blurRad=\"50800\" dist=\"63500\" dir=\"2700000\" algn=\"bl\" rotWithShape=\"0\">
  <a:schemeClr val=\"accent1\">
    <a:alpha val=\"60000\"/>
  </a:schemeClr>
</a:outerShdw>

var shadow = new OuterShadow
{
    BlurRadius = 50800,
    Distance = 63500,
    Direction = 2700000,
    Alignment = RectangleAlignmentValues.BottomLeft,
    RotateWithShape = false
};

var color = new SchemeColor { Val = ColorSchemeIndexValues.Accent1 };
color.Append(new Alpha { Val = 60000 });  // 60% opacity
shadow.Append(color);

Shadow with Skew and Scaling

<a:outerShdw blurRad=\"63500\" dist=\"38100\" dir=\"0\" algn=\"tl\" 
    rotWithShape=\"1\" sx=\"120000\" sy=\"100000\" kx=\"1350000\">
  <a:srgbClr val=\"595959\">
    <a:alpha val=\"70000\"/>
  </a:srgbClr>
</a:outerShdw>

var shadow = new OuterShadow
{
    BlurRadius = 63500,
    Distance = 38100,
    Direction = 0,           // To the right
    Alignment = RectangleAlignmentValues.TopLeft,
    RotateWithShape = true,
    ScaleX = 120000,         // 120% horizontal scale
    ScaleY = 100000,         // 100% vertical scale  
    SkewX = 1350000          // 45 degrees skew
};

var color = new RgbColorModelHex { Val = \"595959\" };
color.Append(new Alpha { Val = 70000 });
shadow.Append(color);

Reference Tables

Direction Angles (Common Values)

Alignment Values

EMU Conversions

Notes

Element Relationships

• Parents: Effect list (\:effectLst), effect DAG (\:effectDag), effect style list (\:effectStyleLst)
• Effect Hierarchy: Shadows are effect nodes; multiple effects stack in order
• Color Definition: Requires exactly one color element with optional alpha modifier
• Shadow Priority: First outer shadow in effects list is primary

Implementation Details

• Blur Radius: Higher values create softer, more diffuse shadows; 0 creates sharp edge
• Distance: EMU units; 38100 ≈ 3 points ≈ 0.042 inches
• Direction: Angle in 60,000ths of degree (0–21600000); rotate direction by shape rotation if
  otWithShape="1"\
• Alignment: Where shadow originates relative to shape; affects visual offset direction
• Rotation Behavior:
  otWithShape="1"\ maintains shadow position relative to shape;
  otWithShape="0"\ keeps shadow absolute
• Scaling: \sx\, \sy\ scale shadow independently (e.g., sx=150000 = 150% horizontal stretch)
• Skew: \kx\, \ky\ apply perspective/skew transformations to shadow
• Color Blending: Shadow colors blend with background; transparency crucial for natural appearance
• Performance: Soft shadows (high blur) more expensive to render than sharp shadows
• Compatibility: Outer shadows render consistently across all Office applications