Click here to Skip to main content
Click here to Skip to main content

Using Color Gradients in Win32/SDK Programs

, 12 Oct 2002
Rate this:
Please Sign up or sign in to vote.
How to create a color gradient as a background in a SDK application.

Sample Image - grad.jpg


Creating a color gradient as a background isn't hard at all. If you have read Nishant's article on using color gradients with MFC, then this code is simply a modified SDK version of his article.

Into the abyss we go

Okay, first I suggest reading the MFC version of this.

After that you should have a simple understanding of how this was done. To get started, simply add the WM_ERASEBKGND message to your window procedure function. I suggest creating a separate function to do all the work of actually drawing the background. If this is the route you decide to take, make sure in the declaration of the function you pass along the handle to your main window. With this said, now for the code.

void OnEraseBkGnd(HWND hwnd)
    /* Vars */
    HDC dc; /* Standard Device Context; used to do the painting */
    /* rect = Client Rect of the window; 
    Temp = Temparary rect tangle for the color bands */
    RECT rect, temp; 
    HBRUSH color; /* A brush to do the painting with */
    /* Get the dc for the wnd */
    dc = GetDC(hwnd);
    /* Get the client rect */
    GetClientRect(hwnd, &rect);
    /* Start color; Change the R,G,B values 
    to the color of your choice */
    int r1 = 255, g1 = 0, b1 = 0;
    /* End Color; Change the R,G,B values 
    to the color of your choice */
    int r2 = 255, g2 = 255, b2 = 0;
    /* loop to create the gradient */
    for(int i=0;i<rect.right;i++) 
        /* Color ref. for the gradient */
        int r,g,b; 
        /* Determine the colors */
        r = r1 + (i * (r2-r1) / rect.right); 
        g = g1 + (i * (g2-g1) / rect.right);
        b = b1 + (i * (b2-b1) / rect.right);
        /* Fill in the rectangle information */
        /* The uper left point of the rectangle 
        being painted; uses i as the starting point*/
        temp.left = i;
        /* Upeer Y cord. Always start at the top */ = 0; 
        /* Okay heres the key part, 
        create a rectangle thats 1 pixel wide */
        temp.right = i + 1; 
        /* Height of the rectangle */
        temp.bottom = rect.bottom; 
        /* Create a brush to draw with; 
        these colors are randomized */
        color = CreateSolidBrush(RGB(r, g, b));
        /* Finally fill in the rectange */
        FillRect(dc, &temp, color);

Final notes

One last final note, now that wasn't hard, was it? Its really easy to create a gradient. Also if you create a second function for creating the gradient, you could just easily call the function when you wanted the gradient to appear. Also with a little bit of customization you could easily make the gradient only a portion of the window. That's all folks...


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
United States United States
No Biography provided

Comments and Discussions

GeneralMy vote of 5 PinmemberMember 780004030-Nov-11 18:19 
GeneralReleaseDC and DeleteObject must be called Pinmembersbcan18-Sep-05 9:30 
GeneralRe: ReleaseDC and DeleteObject must be called PinmemberChuanren Wu13-Jun-07 3:38 
GeneralStep looking PinmemberMate7-Jun-03 15:16 
GeneralWin2k upwards... PinsussIndivara15-Oct-02 0:29 
This code can be used for Win2k onwards.
Uses the GradientFill API. You'll have to link Msimg32.lib too... see MSDN for details.
VOID OnEraseBkGnd(HWND hWnd)
RECT rect;
GRADIENT_RECT gradientrect;
TRIVERTEX trivertex[2];
hDC = GetDC(hWnd);
GetClientRect(hWnd, &rect);
gradientrect.UpperLeft = 0;
gradientrect.LowerRight = 1;
trivertex[0].x = rect.left;
trivertex[0].y =;
trivertex[0].Red = 0x0000;
trivertex[0].Green = 0x0000;
trivertex[0].Blue = 0x9F00;
trivertex[0].Alpha = 0;

trivertex[1].x = rect.right;
trivertex[1].y = rect.bottom;
trivertex[1].Red = 0x0000;
trivertex[1].Green = 0x0000;
trivertex[1].Blue = 0x0000;
trivertex[1].Alpha = 0;
GradientFill(hDC, trivertex, 2, &gradientrect, 1, GRADIENT_FILL_RECT_H);

GeneralDeleteObject PinsussAnonymous14-Oct-02 6:19 
GeneralRe: DeleteObject Pinmembereinst99214-Oct-02 13:11 
GeneralRe: DeleteObject PinmemberPhilippe Lhoste14-Oct-02 23:28 
GeneralRe: DeleteObject PinmemberJohann Gerell15-Oct-02 3:30 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150327.1 | Last Updated 13 Oct 2002
Article Copyright 2002 by einst992
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid