Add a transparent gradient to a JPanel?

Question

I'm drawing a couple of shapes on a JPanel using the paintComponent() method. The final touch is to add a transparent white gradient towards the top.

I have this:

and I want to get something like this:

I've tried to use the GradientPaint method, but it doesn't seem to work properly for me at all. When I call g.setPaint(new GradientPaint(...)), it can't seem to draw over the existing pixels at all.

If anyone would like to see what I'm doing, an SSCCE of the code is available at this Pastebin.

For better help sooner, post an [SSCCE](http://sscce.org/). Also look into alt+printscreen to crop screenshots. A tip from [How do I create screenshots?](http://meta.stackexchange.com/questions/99734/how-do-i-create-a-screenshot-to-illustrate-a-post) (for tips on making *great* screenshots). — Andrew Thompson, Aug 27 '12 at 09:05
I've posted an SSCCE. Thanks! I use Windows 7's snipping tool, as I need to capture from a windowed Virtual Machine — Redandwhite, Aug 27 '12 at 09:15
unrelated: never-ever change the state of the component in paintComponent! (simply remove the setPrefSize, you shouldn't use that particular method _anywhere_) — kleopatra, Aug 27 '12 at 09:29
@kleopatra Thanks. I was using it early on for layout testing (with other components), and forgot to remove it. Since the width is preferred to be around 150, I forgot it there and mistakenly assumed it was being laid out in the frame just fine. — Redandwhite, Aug 27 '12 at 09:56
@kleopatra do you have any references or anything that recommends *against* using `setPref.Size()`? — Redandwhite, Aug 27 '12 at 10:19
not only not setPref, but also the other two :-) For a discusion on why not see f.i http://stackoverflow.com/a/7229519/203657 — kleopatra, Aug 27 '12 at 14:16

score 3 · Accepted Answer · answered Aug 27 '12 at 09:25

3

It seems to produce an effect if these are added as the last lines of paintComponent(Graphics).

// now we have set a paint, DO SOMETHING WITH IT!
g.fillRect(0, 0, getWidth(), getHeight());

Result

enter image description here

answered Aug 27 '12 at 09:25

Andrew Thompson

168,117
40
217
433

MadProgrammer · Answer 2 · 2012-08-27T09:20:36.160

2

Try applying a AlphaComposite before painting the gradient

g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.5f));

The other thing you could try is to use a color with an alpha value within the gradient...

LinearGradientPaint lgp = new LinearGradientPaint(
    startPoint, endPoint, new float[]{...}, 
    new Color[] {
        new Color(255, 255, 255, 0),
        new Color(255, 255, 255, 128),
        new Color(255, 255, 255, 0),
    });

edited Aug 27 '12 at 09:20

answered Aug 27 '12 at 09:14

MadProgrammer

343,457
22
230
366

What values should I use for the `float` array? 0.5 and 1.0 are OK? – Redandwhite Aug 27 '12 at 09:25
That's up to you 0.0 is fully transparent, 1f is fully opaque. Personally, I'd try anywhere between 0.25f - 0.75f & see what you like – MadProgrammer Aug 27 '12 at 09:29
I ended up using this in a different way, but it pointed me in the right direction. The composite command seems to apply a mask over the entire component, which isn't what I was looking for// – Redandwhite Aug 27 '12 at 09:51
@Redandwhite Yep, that it will do, so you need to paint the "solid" areas first, then the "alpha" parts later ;) – MadProgrammer Aug 27 '12 at 10:01
Ah okay! I ended up using the LGP above (with custom values), set it using `g.setPaint(lgp)`, and then used this answer on the very last line of `paintComponent()`: http://stackoverflow.com/a/12139321/216104 – Redandwhite Aug 27 '12 at 10:03
@Redandwhite Yeah, that's probably the easier. `AlphaComposite` is really good for painting shapes and images ;) – MadProgrammer Aug 27 '12 at 10:07

Add a transparent gradient to a JPanel?

2 Answers2

Result

Linked