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 “
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: