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

Jim

Click Here to Leave a Comment Below
Bob - September 20, 2013 Reply

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!!!

Oliver Watkins - May 12, 2014 Reply

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.

Chris - December 6, 2014 Reply

Worked like a charm. Thanks!

danleon - February 3, 2015 Reply

Thanks!

SUNNYben - February 28, 2015 Reply

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.

Anubhab - October 3, 2015 Reply

Beautiful.

Leave a Comment: