October 9th, 2009

Using Blurs and Shadows in Blend

Silverlight Blend Tutorials, Silverlight Effects, Working with Silverlight, by Gavin Wignall.

This post is part of a string of posts found here: Learn Blend in a Month.

Silverlight 3 introduced the ability to use Pixel Shaders with 2 native effects built in and available in the Expression Blend 3 tool. The two Pixel Shaders that Blend currently offers are ‘Drop Shadow‘ and ‘Blur‘. The Drop Shadow effect is even able to convert Photoshop Drop Shadow effects reasonably well through the new ‘Import Adobe Photoshop File‘ feature.

Both the ‘Blur‘ and ‘DropShadow‘ effect will work on any item inside your project, including vector shapes, text and images (even with transparent areas).

Below is a PNG image of a star created with Adobe Photoshop cut out onto a transparent background.

To apply one of the default Pixel Shaders to our star image we need to go to the ‘Properties‘ panel and scan down to the ‘Appearance‘ section. Click the ‘New‘ button next to the ‘Effect‘ button and select the ‘DropShadowEffect‘.

As you can see below, the Shadow Effect hugs the star and omits the transparent areas.

There are now several fields to play with to change your ‘DropShadow‘ effect:

  • BlurRadius - How blurred the Shadow is.
  • Color - The color of your shadow.
  • Direction - The angle of the light source creating the Shadow Effect.
  • Opacity - The strength of the shadow in terms of darkness.
  • ShadowDepth - How far away from your object the Shadow will appear.

To add a ‘Blur‘ effect, go to the ‘Properties‘ panel and scan down to the ‘Appearance‘ section. Click the ‘New‘ button next to the ‘Effect‘ button and select the ‘BlurEffect‘.

As you can see this will blur your entire object.

You only get one option to modify the ‘Blur‘ effect.

  • Radius - The level of Blur intensity.

Only one Pixel Shader can be added to an object. Two get multiple Pixel Shaders on the same item, group the item into a ‘Canvas‘ or ‘Grid‘ using the right mouse button and apply the second Pixel Shader Effect at that level.

Be warned that Pixel Shaders are graphic intensive, so using too many on screen at once or applying Effects to your entire screen may give the end user a poor experience.

To read about alternative methods of creating scalable shadows read this post, to read about creating dynamic 3D shadow effects read this post.

To find out more about adding additional Pixel Shaders, including the below, read this post

  • Directional Blur Effect
  • Pixelate Effect
  • Pinch Effect
  • Ripple Effect
  • Swirl Effect
  • Zoom Blur Effect

Back Top

Responses to “Using Blurs and Shadows in Blend”

  1. Hey Gavin

    There is a free, open source utility (Shazzam) that simplifies creating custom pixel shaders.

    It has a colorized HLSL editor, generates C# and VB code files, and includes a handy testing page for trying out your new shader effect.

    Version 1.1 shipped this weekend.

    Learn more about the new features at http://blog.shazzam-tool.com or watch videos at http://shazzam-tool.com

    Install your own copy of the free Shazzam Pixel Shader Utility at http://shazzam-tool.com/publish.htm.

  2. Hmmm. That should be
    Install your own copy of the free Shazzam Pixel Shader Utility at http://shazzam-tool.com/publish.htm for the installer.

    The comment software added some extra chars.

  3. how to give set inner shadow effect for a textbox

  1. Links (10/11/2009) « Steve Pietrek – Everything SharePoint (,October 12, 2009)

    [...] Using Blurs and Shadows in Blend [...]

  2. Learn Expression Blend in a Month! » Silverlight Buzz (,October 12, 2009)

    [...] Using Blurs and Shadows in Blend [...]

  3. The differences between Text Box and Text Block in Blend » Silverlight Buzz (,November 15, 2009)

    [...] and to range left, right or centred. Both TextBlocks and TextBoxes can have opacity set and have Pixel Shaders applied. Although at first the TextBlock and TextBox look like they do very similar things, they do [...]

Leave a Reply

Back Top