"Shadow Break" effect - Expression Design

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.

Shadow Breaker Completed

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

#1 Kevin Esther on 11.04.2009 at 7:54 AM

Great tutorial keep up the great work. I am just learning expression design and there are not a lot of good quality tutorials out there however this is one site break the mold. thanks

Leave a Comment