The -fx-blend-mode JavaFX CSS Property gives developers the opportunity to access a much wider variety of behaviors in how the colors present in one node blend with the colors of the nodes beneath it. It roughly corresponds to the web CSS property mix-blend-mode, although it does not support the entire CSS syntax.

Behaviour

The default behaviour of non-transparent nodes in JavaFX is to obscure the nodes beneath them completely.

Where transparency is used, the node will partially obscure the node based on the degree of transparency applied.

JavaFX node with no blending applied, but with transparency applied to the green rectangle
No blending, but with transparency applied to the green rectangle.

With blending, the red, green and blue colors of the specified layer blend with the lower layers to produce a variety of effects

Two examples of blend modes in JavaFX defined using -fx-blend-mode

Blending can be subtle (“screen”, for example, lightens as it blends), or dramatic (“exclusion”)

Required Parameters:

A blend mode should be provided without quotes (see Values).

Errors

Several JavaFX CSS blend modes have demonstrated undesirable behaviour on testing.

SRC-IN and SRC-OUT

Although referred to in the Official JavaFX CSS Reference, blend modes src-in and src-out appeared on testing to produce the follwing error. They are also not available using Java code.

No enum constant javafx.scene.effect.BlendMode.src_in'
while calculating value for '-fx-blend-mode'
SRC-ATOP and SRC-OVER

Although referred to in the Official JavaFX CSS Reference, blend modes src-atop and src-over appeared on testing to produce no blending. They are designed to implement the Porter-Duff rules for compositing.

ADD, RED, BLUE and GREEN

The blend modes add, red, blue and green generate the following error and do not generate the desired blending behaviour when applied using CSS.

Caught 'java.lang.ClassCastException: class javafx.scene.paint.Color
 cannot be cast to class java.lang.String

However, when applied using Java code by invoking setBlendMode(), the correct results are obtained.

This is a known bug with the JavaFX CSS Interpreter and corresponds with OpenJDK Bug JDK-8088385.

JavaFX blend modes red, blue and green can only be applied using java code
JavaFX blend modes red, blue and green can only be applied using java code

Syntax

-fx-blend-mode: add;
-fx-blend-mode: color-burn;
-fx-blend-mode: color-dodge;
-fx-blend-mode: darken;
-fx-blend-mode: difference;
-fx-blend-mode: exclusion;
-fx-blend-mode: hard-light;
-fx-blend-mode: lighten;
-fx-blend-mode: multiply;
-fx-blend-mode: overlay;
-fx-blend-mode: screen;
-fx-blend-mode: soft-light;

//Blend modes that are in the CSS reference but do not appear to work:
-fx-blend-mode: add;
-fx-blend-mode: blue;
-fx-blend-mode: green;
-fx-blend-mode: red;
-fx-blend-mode: src-atop;
-fx-blend-mode: src-in;
-fx-blend-mode: src-out;
-fx-blend-mode: src-over;

Values

The JavaFX CSS interpreter isn’t a fully-compliant CSS Interpreter, nor does it support all CSS-values you might expect for the related CSS property.

-fx-blend-mode can have the following values:

ValueResult
noneJavaFX scene with no transparency or blending. The green rectangle completes obscures the logo
color-burnResults of JavaFX -fx-blend-mode color-burn
color-dodgeResults of JavaFX -fx-blend-mode color-dodge
darkenResults of JavaFX -fx-blend-mode darken
differenceResults of JavaFX -fx-blend-mode difference
exclusionResults of JavaFX -fx-blend-mode exclusion
hard-lightResults of JavaFX -fx-blend-mode hard-light
lightenResults of JavaFX -fx-blend-mode lighten
multiplyResults of JavaFX -fx-blend-mode multiply
overlayResults of JavaFX -fx-blend-mode overlay
screenResults of JavaFX -fx-blend-mode screen
soft-lightResults of JavaFX -fx-blend-mode soft-light

Example

JavaFX example app demonstrating blend modes

CSS:

.title{
    -fx-background-color: #fcc200;
    -fx-font-weight: 900;
    -fx-padding: 10px;
    -fx-font-size: 18pt;
}

.color-burn{
    -fx-blend-mode: color-burn;
}

FXML:

<VBox fx:id="view" alignment="TOP_CENTER" prefHeight="250.0" prefWidth="300.0" stylesheets="@../css/styles.css" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.edencoding.controllers.Controller">
    <Label alignment="CENTER" maxWidth="600" styleClass="title" text="Blend Mode: Color Burn"/>
    <StackPane VBox.vgrow="ALWAYS">
        <ImageView fitHeight="150" preserveRatio="true">
            <Image url="@../images/EdenCodingIcon.png" />
        </ImageView>
        <Rectangle fill="#81c483" 
                   height="82.0"  width="190.0"
                   stroke="BLACK" strokeWidth="2.0" 
                   styleClass="color-burn" />
    </StackPane>
</VBox>

See Also