“somehow more organic”: how to create a ‘noisy’ gradient in JavaFX

If you always wondered why some regions on your Mac, Websites or in your Smartphone-Apps look somehow more organic than a plain coloured area or even an region with a gradient, have a closer look!
Zooming into these areas shows that they are a bit “noisy”.

This effect can be created very easily with CSS in JavaFX too:
I just noticed that “-fx-background-image” is painted in front of “-fx-background-color“:

javafx_css_color_paint

So, what is needed is a transparent “noise texture” which can be created here or here.

This texture is then used as a repeated background-image and painted in front the background-color which in JavaFX-CSS can also be a linear gradient:

-fx-background-color: linear-gradient(rgb(224,228,233) 0%, derive(rgb(224,228,233),-20%) 100%);
-fx-background-image: url("images/noise-texture.png");
-fx-background-repeat: repeat;  

I used this approach e.g in my MQTT.fx-UI:

mqtt-fx-6-noise-0.0.2

Leave a Reply to Sean Phillips Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

4 thoughts on ““somehow more organic”: how to create a ‘noisy’ gradient in JavaFX”

  1. to make sure that the image looks even more real you should create a writeable image in javafx and use a pixelwriter to create the noise image by yourself…just a little hint 🙂