#559 – Drawing a Masked Gradient in Blend

You can use an opacity mask with simple shapes along with a gradient to get a style that looks like a gradient applied to a paper cutout.  For example, you might want the following cloud-like effect.

To do this, start with a Rectangle and use a linear gradient for its Fill property.

    	<Rectangle Height="400" Stroke="Black" Width="600">
    	    <Rectangle.Fill>
    	        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    		    <GradientStop Color="#FFFBFBFB" Offset="0.504"/>
    		    <GradientStop Color="#FFD6E1EA" Offset="0.734"/>
    		    <GradientStop Color="#FF6EB5F5" Offset="1"/>
    		</LinearGradientBrush>
 	    </Rectangle.Fill>
        </Rectangle>

Now create an image with the shape of the clouds, using an opaque foreground (black in this example) and a transparent background (shown as checkerboard here).

Finally, use the new clouds image as an ImageBrush for the OpacityMask of the Rectangle.

<Rectangle Height="400" Stroke="Black" Width="600">
    <Rectangle.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFBFBFB" Offset="0.504"/>
            <GradientStop Color="#FF6EB5F5" Offset="1"/>
            <GradientStop Color="#FFD6E1EA" Offset="0.734"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
    <Rectangle.OpacityMask>
        <ImageBrush ImageSource="Images\CloudsMask.png"/>
    </Rectangle.OpacityMask>
</Rectangle>

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: