Gradient Effect

The PacemFxGradientElement adds gradient effect to elements.
It might be either a single one or a stack of different gradients.

Gradients can be applied to the text content as well, by switching the mode attribute to text.

Linear Gradient

Generates a linear gradient on a target element.

<!-- example -->
<div id="target">target element</div>

<pacem-fx-gradient target="#target">
    <!-- angle in degrees -->
    <pacem-fx-gradient-linear angle="45">
        <!-- offsets normalized -->
        <pacem-fx-gradient-stop offset="0" color="red"></pacem-fx-gradient-stop>
        <pacem-fx-gradient-stop offset="1" color="blue"></pacem-fx-gradient-stop>
    </pacem-fx-gradient-linear>
</pacem-fx-gradient>

Radial Gradient

Generates a radial gradient on a target element.

<!-- example -->
<div id="target">target element</div>

<pacem-fx-gradient target="#target">
    <!-- normalized size and center -->
    <pacem-fx-gradient-radial shape="ellipse" size="1,1" center="0.5,0.5">
        <!-- offsets normalized -->
        <pacem-fx-gradient-stop offset="0" color="red"></pacem-fx-gradient-stop>
        <pacem-fx-gradient-stop offset="1" color="blue"></pacem-fx-gradient-stop>
    </pacem-fx-gradient-radial>
</pacem-fx-gradient>