I have some styles that use "background-blend-mode:screen" to blend more than one gradient on the background image property. I was having a problem where it was blending in the default blue color when I was using these styles on buttons resulting in strange-colored gradients.
The problem is that it blends the inherited background color property in with the background image property I was creating. Applying the style to a label looked correct while applying it to a button would produce an unintended color.
The easiest way to fix this is to override the background color property with a transparent color.
Here's example CSS that overrides the background color so it looks right when applied to a button.
Example:
background-color:#FFFFFF00;
background-blend-mode:screen;
background-image:linear-gradient(to bottom, rgb(255,0,0), rgb(128,0,0)), linear-gradient(180deg, rgba(200,200,200,0) 0%, rgba(230,230,230,50%) 45%, rgba(0,0,0,0) 51%);
You can use a similar trick to make a single grayscale gradient and apply a background color to blend it into a nice gradient.
For those who don't know, it's always best to use buttons for things that people click on because it gives you an "onActionPerformed" event which is more reliable than "onClick" with some touchscreen drivers. I don't know how relevant that is with recent touchscreen drivers but I have definitely had touchscreen drivers struggle with onClick but work with onActionPerformed.