Shadow

To use the default shadow, we use the shadow op.

Default shadow

To add shadow to an element, use the following object:

let nodes = [
  {
    op: "shadow"
  }
];

let elements = [
  {
    type: "h1",
    value: "Hello"
  }
];

This generates default shadow operation on each element.

new Text("Hello").set({
    size: "S1",
    font: "Arial",
    shadow: {
        op: {
            name: "shadow",
            steps: 3,
            colors: [
                "orange",
                "green",
                "yellow"
            ]
        }
    }
}).render("#mount"); 

Custom shadow

We can also create simpler shadow on an element.

new Text("Single shadow").set({
    size: "S1",
    font: "Arial",
    shadow: {
        op: {
            name: "shadow",
            steps: 1,
            colors: ["#1abc9c"]
        }
    }
}).render("#mount"); 

You can also specify the following shadow properties:

• movements — array with horizontal and vertical movement of the shadow
  (offsetX is movements[0] and offsetY is movements[1])
• radius — blur amount of the shadow

new Text("Shadow with movements").set({
    size: "S1",
    font: "Arial",
    shadow: {
        op: {
            name: "shadow",
            steps: 1,
            colors: ["#1abc9c"],
            movements: ["16px", "16px"],
            radius: "6px"
        }
    }
}).render("#mount");