How to: Create Text with a Shadow

The examples in this section show how to create a variety of shadow effects for displayed text.

Note:
For a complete code sample illustrating shadow effects for text, see Text Shadow Sample.

Example

The DropShadowBitmapEffect object allows you to create a variety of drop shadow effects for Windows Presentation Foundation (WPF) objects. The following example shows a typical type of a drop shadow effect applied to text. In this case, the shadow is a soft shadow, which means the shadow color blurs.

Example of text with a soft shadow

You can control the width of a shadow by setting the ShadowDepth property. A value of 4.0 indicates a shadow width of 4 pixels. You can control the softness, or blur, of a shadow by modifying the Softness property. A value of 0.0 indicates no blurring—a value of 1.0 indicates total blurring. The following code example shows how to create a soft shadow.

<!-- Soft single shadow. -->
<TextBlock
  Text="Shadow Text"
  Foreground="Teal">
  <TextBlock.BitmapEffect>
    <DropShadowBitmapEffect
      ShadowDepth="4"
      Direction="330"
      Color="Black"
      Opacity="0.5"
      Softness="0.25" />
  </TextBlock.BitmapEffect>
</TextBlock>

Note:
These shadow effects do not go through the Windows Presentation Foundation (WPF) text rendering pipeline. As a result, ClearType is disabled when using these effects.

The following example shows a hard drop shadow effect applied to text. In this case, the shadow is not blurred.

Example of text with a hard shadow

You can create a hard shadow by setting the Softness property to 0.0, which indicates that no blurring is used. You can control the direction of the shadow by modifying the Direction property. Set the directional value of this property to a degree between 0 and 360. The following diagram shows the directional values of the Direction property setting.

DropShadow Direction diagram

The following code example shows how to create a hard shadow.

<!-- Hard single shadow. -->
<TextBlock
  Text="Shadow Text"
  Foreground="Maroon">
  <TextBlock.BitmapEffect>
    <DropShadowBitmapEffect
      ShadowDepth="6"
      Direction="135"
      Color="Maroon"
      Opacity="0.35"
      Softness="0.0" />
  </TextBlock.BitmapEffect>
</TextBlock>

The following example shows a drop shadow effect that combines both a hard and soft shadow applied to text.

Example of text with a hard and soft shadow

The following code example shows how to create a combine hard and soft shadow.

<!-- Hard shadow on top of soft shadow. -->
<TextBlock
  Text="Shadow Text"
  Foreground="CornflowerBlue">
  <TextBlock.BitmapEffect>
    <BitmapEffectGroup>
      <BitmapEffectGroup.Children>
        <DropShadowBitmapEffect
          ShadowDepth="5"
          Direction="330"
          Color="DarkSlateBlue"
          Opacity="0.75"
          Softness="0.50" />
        <DropShadowBitmapEffect
          ShadowDepth="2"
          Direction="330"
          Color="Maroon"
          Opacity="0.5"
          Softness="0.0" />
      </BitmapEffectGroup.Children>
    </BitmapEffectGroup>
  </TextBlock.BitmapEffect>
</TextBlock>

The following example shows a variation of the preceding example. In this example, the soft shadow shows random color intensity. You can control the random color intensity by modifying the Noise property. A value of 0.0 indicates no noise—a value of 1.0 indicates maximum noise.

Example of text with a hard shadow and soft shadow with noise

The following code example shows how to create a shadow with noise.

<!-- Hard shadow on top of noisy shadow. -->
<TextBlock
  Text="Shadow Text"
  Foreground="Silver">
  <TextBlock.BitmapEffect>
    <BitmapEffectGroup>
      <BitmapEffectGroup.Children>
        <DropShadowBitmapEffect
          ShadowDepth="3"
          Direction="330"
          Color="Black"
          Opacity="0.75"
          Softness="0.0" />
        <DropShadowBitmapEffect
          Noise="0.5"
          ShadowDepth="6"
          Direction="330"
          Color="Black"
          Opacity="0.35"
          Softness="0.25" />
      </BitmapEffectGroup.Children>
    </BitmapEffectGroup>
  </TextBlock.BitmapEffect>
</TextBlock>

Using an Outer Glow Bitmap Effect

An OuterGlowBitmapEffect can be used to create a shadow-like effect. However, an outer glow radiates evenly behind text, unlike the DropShadowBitmapEffect, which renders according to a specified direction.

The following example shows an outer glow effect applied to text.

Example of text with an outer glow effect

You can control the width of an outer glow by setting the GlowSize property. A value of 4.0 indicates a an outer glow width of 4 pixels. The following code example shows how to create an outer glow effect.

<!-- Shadow effect by creating an outer glow. -->
<TextBlock
  Text="Shadow Text"
  Foreground="SteelBlue">
  <TextBlock.BitmapEffect>
    <OuterGlowBitmapEffect
      GlowSize="4.0"
      GlowColor="Orange"
      Opacity="1.0"/>
  </TextBlock.BitmapEffect>
</TextBlock>

Using a Blur Bitmap Effect

A BlurBitmapEffect can be used to create a shadow-like effect that can be placed behind a text object. A blur bitmap effect applied to text blurs the text evenly in all directions.

The following example shows a blur effect applied to text.

Example of text with a blur effect

The following code example shows how to create a blur effect.

<!-- Shadow effect by creating a blur. -->
<TextBlock
  Text="Shadow Text"
  Foreground="Green"
  Grid.Column="0" Grid.Row="0" >
  <TextBlock.BitmapEffect>
    <BlurBitmapEffect
      Radius="8.0"
      KernelType="Box"/>
  </TextBlock.BitmapEffect>
</TextBlock>
<TextBlock
  Text="Shadow Text"
  Foreground="Maroon"
  Grid.Column="0" Grid.Row="0" />

Using a Translate Transform

A TranslateTransform can be used to create a shadow-like effect that can be placed behind a text object.

The following code example uses a TranslateTransform to offset text. In this example, a slightly offset copy of text below the primary text creates a shadow effect.

Example of text using a transform for a shadow effect

The following code example shows how to create a transform for a shadow effect.

<!-- Shadow effect by creating a transform. -->
<TextBlock
  Foreground="Black"
  Text="Shadow Text"
  Grid.Column="0" Grid.Row="0">
  <TextBlock.RenderTransform>
    <TranslateTransform X="3" Y="3" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  Foreground="Coral"
  Text="Shadow Text"
  Grid.Column="0" Grid.Row="0">
</TextBlock>

See Also

Reference

BlurBitmapEffect
DropShadowBitmapEffect
OuterGlowBitmapEffect

Concepts

Bitmap Effects Overview

Other Resources

Text Shadow Sample