Using Gradient Shading in Web Pages

In his book Code Complete, Steve McConnell wrote:

"Don't limit your programming thinking only to the concepts that are supported automatically by your language [or tool]. The best programmers think of what they want to do, and then assess how to accomplish their objectives with the programming tools at their disposal."

McConnell is right. Without this outside-the-box thinking, new language idioms would probably never be invented. Of course, you should make sure you know about everything inside the box as well, so you don't needlessly reinvent the wheel. In Web programming, the box is very big indeed and has many corners, nooks, and crannies.

This article looks in one of those nooks in the Cascading Style Sheet (CSS) section: filters. There are all kinds of filters that add neat effects to your Web pages. The one demonstrated here adds a gradient coloring effect that you can apply to anything that needs a little lively coloring (in moderation, please).

Reviewing the Elements of a Gradient Filter

You can use cascading style sheets to organize style information in a single location. (You can also embed styles and add them inline, but that's another article.) The filter is an attribute of a style. The filter attribute affects some change on the thing to which it is applied.

The gradient filter is an ActiveX control that applies gradient coloring, beginning with a start color and gradually changing to the end color. The default gradient filter uses a horizontal blue-to-black color scheme. You can apply the default filter inline (for example, on a div) with the fewest number of arguments. Listing 1 shows the default gradient coloring, and Figure 1 shows the results.

Listing 1: The Default Gradient Filter Style Applied Inline to a Div

<div style="filter:progid:DXImageTransform.Microsoft.Gradient(
   width: 300px; height: 150px">

Figure 1: A small div with the default gradient shading filter applied.

To use some additional features of the gradient filter, you need to provide additional arguments. Other features include GradientType, which can be 0 or 1. The value 1 indicates the gradient shading will be horizontal and 0 represents vertical shading. The feature StartColorStr indicates the color to start the shade with and EndColorStr indicates the ending color. For example, if you wanted to use green and white to shade a div vertically, you could use the inline style filter shown in Listing 2 (see Figure 2 for the result).

Listing 2: A Vertical Green and White Gradient Color Scheme

<div style="filter: progid:DXImageTransform.Microsoft.Gradient(
   GradientType=0, StartColorStr='green', EndColorStr='white');
   width: 300px; height: 150px">

Figure 2: A Vertical Green and White Gradient Shade Filter

Additional Resources

If you want some help finding imaginative colors, check out this MSDN link.

Any Effect You Can Think Of

You'll find filters for shadows, control reveals, gradient shading, making images glow, and more. Name what you want to do and you can find a filter that will help you create the desired result.

Gradient filters have been around a little while, but many new and cool features are available for .NET programmers. One of my new favorites is Atlas: lightweight, asynchronous XmlHttpRequests from client to server without the usual ASP.NET page flicker and post back.

About the Author

Paul Kimmel is the VB Today columnist for and has written several books on object-oriented programming and .NET. Check out his new book UML DeMystified from McGraw-Hill/Osborne and his upcoming book C# Express for the Professional Programmer from Addison Wesley (Spring 2006). Paul is an architect for Tri-State Hospital Supply Corporation. You may contact him for technology questions at

If you are interested in joining or sponsoring a .NET Users Group, check out

Copyright © 2006 by Paul T. Kimmel. All Rights Reserved.


  • If it excludes, I exclude it

    Posted by bpatin on 03/08/2006 02:35pm

    Techniques that only apply to IE are worthless to anyone who intends to code for any other than a highly restrictive audience. This article wasted my time. "IE Only" should have been part of the title, so I wouldn't have bothered to read it.

  • for IE only

    Posted by hspc on 03/04/2006 03:37am

    Good Article. Note that these effects are DirectX effects used for IE only.

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • U.S. companies are desperately trying to recruit and hire skilled software engineers and developers, but there's simply not enough quality talent to go around. In response, companies often resort to inferior solutions -- hiring substandard developers and engineers, recruiting talent on a part-time or temporary basis, poaching people from competitors, or burdening an already stressed IT staff for more of their labor. Fortunately, there's a better solution. Read this white paper to learn the business value of …

  • Thanks to the Internet of Things (IoT), physical assets are turning into participants in real-time global digital markets. The countless types of assets around us will become as easily indexed, searched and traded as any online commodity. While some industries will be tougher to transform than others – those with physical limitations, such as manufacturing, will be harder to digitize – untold economic opportunities exist for growth and advancement. Our research shows this will create a new "Economy …

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date