Click here to Skip to main content
13,087,784 members (79,550 online)
Click here to Skip to main content
Add your own
alternative version


21 bookmarked
Posted 27 Mar 2009

Fade out image or Graphics objects

, 27 Mar 2009
Rate this:
Please Sign up or sign in to vote.
Fade out an image or Graphics object by modifying the alpha value on a new mask placed above the original image.


By placing a layer above an image and letting its alpha value increase step by step with a timer, you can realise fade effects for any image or graphics object in C#. In this example, I placed two PictureBoxes and three buttons on a form. The left-sided PictureBox shows the original picture, while the fade effect is demonstrated inside the right-sided PictureBox. You start everything by clicking on the "Start" button. The "Restart" button reloads the original image and lets you start the effect again. By clicking on the "Pick color" button, you can choose a different color to fade to.

Using the code

You start the effect by clicking on the "Start" button and starting the timer tFadeOut.

private void btnStart_Click(object sender, EventArgs e)
    //disable buttons and start timer
    btnStart.Enabled = false;
    btnPickColor.Enabled = false;
    btnReload.Enabled = false;

The timer ticks, and by every tick, the function Lighter() returns the modified image for the right-sided PictureBox until x is incremented up to 102.

private void tFadeOut_Tick(object sender, EventArgs e)
    if (x == 102)
        //if x was incremented up to 102, the picture was faded 
        //and the buttons can be enabled again
        x = 50;
        btnPickColor.Enabled = true;
        btnReload.Enabled = true;
        //pass incremented x, and chosen color to function 
        //Lighter and set modified image as second picture box image
        pImage02.Image=Lighter(pImage02.Image, x++, colToFadeTo.R, 
                               colToFadeTo.G, colToFadeTo.B);

Inside the function Lighter(), the passed image imgLight first gets converted into a Graphics object. The next step is calculating the new alpha value for the mask to place above the Graphics object. Then, this mask is created as a Pen object with the calculated alpha value and the color to fade to. This mask gets drawn above the Graphics object by using the method DrawLine with the pen pLight created in the former step. Saving the final Graphics object by using the method graphics.Save() also saves the new picture to the image imgLight. The final steps are disposing the Graphics object and returning the new, modified image.

private Image Lighter(Image imgLight, int level, int nRed, int nGreen, int nBlue)
    //convert image to graphics object
    Graphics graphics = Graphics.FromImage(imgLight);
    int conversion = (5 * (level - 50)); //calculate new alpha value
    //create mask with blended alpha value and chosen color as pen 
    Pen pLight = new Pen(Color.FromArgb(conversion, nRed, 
                         nGreen, nBlue), imgLight.Width * 2);
    //apply created mask to graphics object
    graphics.DrawLine(pLight, -1, -1, imgLight.Width, imgLight.Height);
    //save created graphics object and modify image object by that
    graphics.Dispose(); //dispose graphics object
    return imgLight; //return modified image


  • 27.03.2009 - First version uploaded to CodeProject.


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


About the Author

No Biography provided

You may also be interested in...

Comments and Discussions

QuestionFadeIn Pin
descartes25-May-15 8:36
memberdescartes25-May-15 8:36 
AnswerRe: FadeIn Pin
Whivel16-Oct-15 9:42
memberWhivel16-Oct-15 9:42 
QuestionLovely code [modified] Pin
ak1628-Jun-11 1:23
memberak1628-Jun-11 1:23 
What would the reverse version of the Lighter function be? I 'd guess DEcrementing x, but it doesn't seem to work for me..
It works if you call it once, say with 140 Alpha, but it wont work through the timer. Weird, huh?
modified on Tuesday, June 28, 2011 7:34 AM

Generalthanx a lot Pin
Amit_Bhosale20-Jun-09 21:01
memberAmit_Bhosale20-Jun-09 21:01 
GeneralThx. Pin
cnmeta29-Mar-09 18:13
membercnmeta29-Mar-09 18:13 

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
Web03 | 2.8.170813.1 | Last Updated 27 Mar 2009
Article Copyright 2009 by notorious.madeye
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid