“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

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

  1. Gerrit GrunwaldMay 16, 2014 at 20:07Reply

    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 🙂

    1. Jens DetersMay 16, 2014 at 21:55Reply

      You are right, but then its not a one-liner anymore ;-).
      I really like this simple approach with a CSS class.

      1. Sean PhillipsMay 19, 2014 at 14:29Reply

        You can make anything a one liner with enough semi-colons…
        Cool post Jens.

Leave a Comment