How to add a Gradient Background to any JComponent

Almost every “web 2.0″ application have a cool linear gradient background instead of the plain old boring single color solid background. Adding a gradient background to your application is very simple with only a few lines of additional code. In the example program, I am using Java2D and the GradientPaint class to draw the linear gradient background.

Below is the program that I used to create the image above. We override the paintComponent of the JPanel (or any JComponent) and fill the background with a gradient paint. The begin and end colors for the gradient paint are derived from the component’s background color using the brighter and darker variations.

The one important step is to set the component to be non-opaque using the setOpaque(false) method. This will prevents Swing from painting the background, because we want to control the background painting ourselves. If the component was opaque, then Swing will overwrite our gradient background with a solid background when we call super.paintComponent(g) in our implement implementation of paintComponent.

import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class GradientBackgroundDemo {
    public static void main(String args[]) {
        JFrame f = new JFrame("Gradient Background Demo");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        JPanel contentPane = new JPanel() {
            @Override
            protected void paintComponent(Graphics grphcs) {
                Graphics2D g2d = (Graphics2D) grphcs;
                g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                        RenderingHints.VALUE_ANTIALIAS_ON);

                GradientPaint gp = new GradientPaint(0, 0,
                        getBackground().brighter().brighter(), 0, getHeight(),
                        getBackground().darker().darker());

                g2d.setPaint(gp);
                g2d.fillRect(0, 0, getWidth(), getHeight());

                super.paintComponent(grphcs);
            }
        };
        contentPane.setOpaque(false);
        f.setContentPane(contentPane);
        ImageIcon icon = new ImageIcon(GradientBackgroundDemo.class.getResource("gears.png"));
        contentPane.add(new JLabel(icon));
        f.setSize(200, 200);
        f.setVisible(true);
    }
}

Download Source Code

Related posts:

  1. Display a JList with a Background Image
  2. How to create a Callout Border
  3. How to use Swing Borders
  4. How to display line numbers in JTable
  5. Improving the Swing GUI with seamless textured background images
  1. Can you tell me how to do it in an IDE-generated Swing application generated by NetBeans 6.7?

    I’m really struggling with this. In Delphi it is SO SIMPLE to create gradient toolbars; here it is SO COMPLICATED!!!

  2. nice. never new creating colour gradients would be so easy in Swing. Hey, perhaps we could hook out blogs up. Mine is http://www.blue-walrus.com/. We seem to be doing pretty similar things.

  3. Worked like a charm. Thanks!

  4. This is a nice one. Thanks for sharing this with us.

    For NetBeans users:
    Create a JFrame form, add a JPanel to it, set the opaque property of the Panel to false, add a JLabel on top and set “gears.png” as the icon.
    Then create a separate class that extends JPanel and copy the code inside contentPanel as above into it.Then right-click the JPanel inside the JFrame form and select Customize Code. Change default code to custom code where you have the jPanel initialization and replace new JPanel() with the custom panel you created.

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>