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
.jpg "Text shadow with Softness = 0.25")
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
.jpg "Text shadow with Softness = 0")
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
.png "DropShadow degree setting of shadow")
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
.jpg "Text with two shadows")
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
.jpg "Text 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
.jpg "Text shadow using an OuterGlowBitmapEffect")
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
.jpg "Text shadow using a BlurBitmapEffect")
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
.jpg "Text shadow using a TranslateTransform")
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>