Click here to Skip to main content
13,867,817 members
Click here to Skip to main content
Add your own
alternative version


9 bookmarked
Posted 8 Aug 2017
Licenced CPOL

Beveled Panel with Shadow Effect

, 8 Aug 2017
Rate this:
Please Sign up or sign in to vote.
A panel that has rounded borders, gradients, edges/bevels and a shadow


By applying bevels, you can add depth to flat objects, it simulates the nicety of a real beveled shape. This article briefly explains how to design and implement the ability to paint the bevel onto a panel and how to apply the soft shadow for this control.


The bevel effect is the simulation of two layers. The bottom layer should contain the shape, which will be split diagonally. Each half has to be filled with light and dark color. This will create edges effect. The upper level should create shape with the smaller size for the panel main area. The pictures below give detailed explanation.

Sample Image - maximum width is 600 pixels


The bottom shape in the given control was drawn as a rounded rectangle with linear gradient filling. To split the area by diagonal, component uses Blend function.

private void DrawEdges(Graphics g, ref Rectangle edgeRect)
    Rectangle lgbRect = edgeRect;
    lgbRect.Inflate(1, 1);

    var edgeBlend = new Blend();
    switch (Style)
        case BevelStyle.Lowered:
            edgeBlend.Positions = new float[] { 0.0f, .49f, .52f, 1.0f };
            edgeBlend.Factors = new float[] { .0f, .6f, .99f, 1f };

        case BevelStyle.Raised:
            edgeBlend.Positions = new float[] { 0.0f, .45f, .51f, 1.0f };
            edgeBlend.Factors = new float[] { .0f, .0f, .2f, 1f };

    using (var edgeBrush = new LinearGradientBrush(lgbRect,
        edgeBrush.Blend = edgeBlend;
        RoundedRectangle.DrawFilledRoundedRectangle(g, edgeBrush, edgeRect, _rectRadius);

The top shape is the simple rounded rectangle.

private void DrawPanelStyled(Graphics g, Rectangle rect)
    using (Brush pgb = new LinearGradientBrush(rect, _startColor, _endColor,
        RoundedRectangle.DrawFilledRoundedRectangle(g, pgb, rect, _rectRadius);

The basic idea for the soft shadow effect was described in this article.

This control uses PathGradientBrush with transparent outline color.

using (PathGradientBrush shadowBrush = new PathGradientBrush(path))
    shadowBrush.CenterPoint = new PointF(rect.Width / 2,
        rect.Height / 2);

    // Set the color along the entire boundary 
    Color[] color = { Color.Transparent };
    shadowBrush.SurroundColors = color;

    // Set the center color 
    shadowBrush.CenterColor = _shadowColor;
    graphics.FillPath(shadowBrush, path);

    shadowBrush.FocusScales = new PointF(0.95f, 0.85f);
    graphics.FillPath(shadowBrush, path);


The described technique gives control with the following features:

  • Bevel Effect
  • Rounded corners
  • Gradients
  • Soft shadow
  • Edge thickness
  • Shadow depth


  • 8th August, 2017: Initial post


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


About the Author

Yury Yuhno
Software Developer
Latvia Latvia
I specialize in .Net with C#.
MSc in Computer Science, Daugavpils University

You may also be interested in...

Comments and Discussions

Questioncomment Pin
avisal10-Aug-17 5:38
professionalavisal10-Aug-17 5:38 
QuestionGood useful trick Pin
Member 1086218010-Aug-17 4:35
memberMember 1086218010-Aug-17 4:35 
QuestionOK I Guess, But... Pin
Kevin Marois9-Aug-17 11:52
professionalKevin Marois9-Aug-17 11:52 
AnswerRe: OK I Guess, But... Pin
Yury Yuhno9-Aug-17 20:17
memberYury Yuhno9-Aug-17 20:17 

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 | Cookies | Terms of Use | Mobile
Web05 | 2.8.190214.1 | Last Updated 8 Aug 2017
Article Copyright 2017 by Yury Yuhno
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid