“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
“:
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:
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 🙂
You are right, but then its not a one-liner anymore ;-).
I really like this simple approach with a CSS class.
You can make anything a one liner with enough semi-colons…
Cool post Jens.
😉 Thanks, Sean!