JavaFX – Text Effects

Bookmark and Share

We can create emboss and engrave text effects by using layers of nodes and Light Effects API. In below screenshots, the first two are generated using layers of nodes and third one using Light effects API.



JankoAtWarpSpeed has many tutorials related to building of functional and good looking web sites. The tutorials can also be adapted for implementing engrave text effect in JavaFX. I followed the steps mentioned in “Two simple ways to create text embossing effect” tutorial and reproduced the engrave effect in JavaFX! The same approach can used for emboss by moving the shadow nodes in opposite direction.

For third effect, I used the SpotLight API. The values specified for this is obtained from Light Effect Sample. Another sample code is available in JavaFX API Docs of SpotLight.

To launch click on above image or

Try it out and let me know feedback.. Please do share other approach..

Also refer to stunning text effects blog entry by Jasper Potts


About Rakesh Menon

10 Responses to JavaFX – Text Effects

  1. Charles Tam says:

    Thanks, very nice example.

  2. Rakesh says:

    Hi Rakesh,
    I liked the Eboss Text effect very much .
    Thank you so much for the code .
    But is there any specific reason why you have chosen :
    light: SpotLight {
    x: 58.0
    y: 211.0
    z: 100.0
    pointsAtX: 100.0
    pointsAtY: -311.0
    pointsAtZ: -105.0
    color: Color.WHITE
    Can you please make it more modular .

  3. Rakesh Menon says:

    @Rakesh I updated sample to reverse the engrave approach and simulate emboss. I selected SpotLight purely based on the look obtained from the sample, no particular reason for the same.

  4. Rakesh says:

    Hi Rakesh Menon,
    Thanks for the modified code .
    I liked it so much .
    From the above screen shot
    i see that if light source ( white shadow )
    is at the Top, then the shadow comes in the bottom part ( black shadow ) and it looks
    elevated and vice verca . I’ll try to implement this concept for objects other than text and will check if it works .
    By the way, i have got a similar reply in a forum when i tried to implement the deep text effect .

  5. Rakesh Menon says:

    @Rakesh Thanks! Share your experience with other objects.. You may be interested in below sample as well..

  6. Rakesh says:

    Hi Rakesh,
    Thanks for the above link .
    The light shadow and dark shadow effect can be implemented for any JavaFx Node very easily .
    For a node if we apply brightness = +1 then it will be light shadow and if we apply brightness = -1 it will be nothing but dark shadow . Like you have just did for the text, i have tried to place the dark and light shadows at y+1 and y-1 but it did not help . I mean the object/ JavaFx node did not look elevated to deeper . Infact i have tried this effect for some images and gradient buttons but no luck 😦 .
    You may try something similar and let me know your feedback .

  7. Jasper Potts says:

    You inspired me to have a go, here are some more cool text effects with JavaFX

  8. Rakesh Menon says:

    @Jasper Looks great! 🙂 looking forward to “50 Stunning JavaFX Text Effect Tutorials”

  9. Vas says:

    Hi Rakesh,
    Great Examples so far.
    Is there a way to wrap text around a particular shape or path.
    Your help is greatly appreciated.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: