This is a quick tutorial on how to create a neat "shadow break" with Expression Design.
This is great for breaking up content on your page and making it look cool at the same time.
![]()
First up, create a thin oval shape on your art board. Mine is about 400 wide x 25 high pixels.
![]()
Now add a radial gradient to your new oval. ![]()
Set the stops from black to black ![]()
and set the stop alpha on the second stop to 0% ![]()
Now your oval should look a little like this.
![]()
Next, edit the gradient's properties ![]()
I’m setting the height of the gradient to about 2.5%. (remember to unlock the constraints between your height and width of the gradient by clicking the link icon in between them)

This will thin out your gradient .
And the last step is to cut off half of the shape by using the direct select tool (the white pointer). Manipulate each point to look like this.
![]()
And there you have it! A nice way to break up content and the best part is when it's exported from Expression Design into XAML, it's still a path so resizing is no problems in Expression Blend.
![]()
Enjoy!
About the Author
Alex Knight
Alex is a Silverlight MVP with a strong focus on the graphics and user interface side of things. He runs Xamling with Jordan Knight (@jakkaj) which specialises in creating awesome experiences for Silverlight and WPF. So it doesn't matter what platform, if its xaml he digs it. If you want to find more out about Alex, check out:AGKDesign.twitter | xamling.net




