Click here to Skip to main content
13,403,887 members (52,435 online)
Click here to Skip to main content
Add your own
alternative version


46 bookmarked
Posted 17 Aug 2005


, 17 Aug 2005
Rate this:
Please Sign up or sign in to vote.
An article on drawing gradients using the CGradientRender class.






Most programmers used Windows SDK function GradientFill to draw horizontal or vertical linear gradients or triangle gradients. Also, classes for diagonal gradients can be found on CodeProject. But what about custom gradients? Or experimental gradients? In this article, a class for drawing such gradients is presented. Its functionality is not hard-tested or free of bugs, so please have that in mind when using it.


One can find various articles on gradients all over the Internet and very good examples on CodeProject also.

Using the code

To use the CGradientRender class, include the provided header file "GradientRender.h" and make an instance of this class.

#include "GradientRender.h"

CGradientRender gradientRender;

Now, this class has only one public method called DrawGradient, so call this method like in the example below:

// hDC is a destination device context (i.e. screen device context)

RECT rect = {100, 100, 300, 300};     // gradient rectangle
COLORREF startColor = RGB(0,0,255);   // start gradient color
COLORREF endColor = RGB(255,0,0);     // end gradient color

The last two arguments are the type of the gradient and the type of the transformation. If the type of the transformation is TRANSFORMATION_NONE then this class can perform drawing of five basic gradient types:

  • Horizontal gradient (GRADIENT_HORIZONTAL)
  • Vertical gradient (GRADIENT_VERTICAL)
  • Forward diagonal gradient (GRADIENT_FDIAGONAL)
  • Backward diagonal gradient (GRADIENT_BDIAGONAL)
  • Radial gradient (GRADIENT_RADIAL)

Also, using some type of transformation, the results can vary. This is the field of customization and experimenting. Current transformations are listed below:

  • No transformation (TRANSFORMATION_NONE)
  • Caricature transformation (TRANSFORMATION_CHARICATURE)
  • Fisheye transformation (TRANSFORMATION_FISHEYE)
  • Swirled transformation (TRANSFORMATION_SWIRLED)
  • Cylinder transformation (TRANSFORMATION_CYLINDER)
  • Shift transformation (TRANSFORMATION_SHIFT)

In basic, these six transformations are performed on five different types of gradients. There are 30 combinations for now. Some good, some even better. But, one must experiment with the parameters of the transformation in order to get custom results, or add a new transformation which would be the best. All transformations are performed in the private method ApplyTransformation of the CGradientRender class.

Points of Interest

Working on this material, I found an interesting research field. Almost any image transformation can be applied here (even color transformation which is not tested here) and everyone is invited to try.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior) Elektromehanika d.o.o. Nis
Serbia Serbia
He has a master degree in Computer Science at Faculty of Electronics in Nis (Serbia), and works as a C++/C# application developer for Windows platforms since 2001. He likes traveling, reading and meeting new people and cultures.

You may also be interested in...

Comments and Discussions

GeneralMy vote of 4 Pin
futurejo26-Apr-13 18:59
memberfuturejo26-Apr-13 18:59 
GeneralMy vote of 5 Pin
kanbang12-Apr-12 23:34
memberkanbang12-Apr-12 23:34 
GeneralMy vote of 5 Pin
Member 78000401-Dec-11 15:58
memberMember 78000401-Dec-11 15:58 
GeneralMy vote of 5 Pin
Member 779464729-Mar-11 1:20
memberMember 779464729-Mar-11 1:20 
GeneralBug and workaround Pin
Ed The C16-Jul-09 7:41
memberEd The C16-Jul-09 7:41 
GeneralDid this work in 16 bit mode Pin
Vinicius Jarina7-Mar-07 10:35
memberVinicius Jarina7-Mar-07 10:35 
GeneralDiffusion Point Pin
theali6-Mar-07 20:12
membertheali6-Mar-07 20:12 
HOW WHAT6-Dec-05 5:45
memberHOW WHAT6-Dec-05 5:45 
GeneralWell done! Pin
Dandy Cheung17-Aug-05 22:23
memberDandy Cheung17-Aug-05 22:23 
GeneralGood start... Pin
Paul Selormey17-Aug-05 2:46
memberPaul Selormey17-Aug-05 2:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.1802120.2 | Last Updated 17 Aug 2005
Article Copyright 2005 by darkoman
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid