Search
Loading...
Skip to content

Shadows and Glows

In this example, we will show you how to use the CreativeEditor SDK’s CreativeEngine to modify an block’s drop shadow through the block API. Drop shadows can be added to any shape, text or image. One can adjust its offset relative to its block on the X and Y axes, its blur factor on the X and Y axes and whether it is visible behind a transparent block.

Functions#

supportsDropShadow(id: DesignBlockId): boolean

Query if the given block has a drop shadow property.

  • id: The block to query.
  • Returns True if the block has a drop shadow property.
setDropShadowEnabled(id: DesignBlockId, enabled: boolean): void

Enable or disable the drop shadow of the given design block. Required scope: ‘appearance/shadow’

  • id: The block whose drop shadow should be enabled or disabled.
  • enabled: If true, the drop shadow will be enabled.
isDropShadowEnabled(id: DesignBlockId): boolean

Query if the drop shadow of the given design block is enabled.

  • id: The block whose drop shadow state should be queried.
  • Returns True if the block’s drop shadow is enabled.
setDropShadowColor(id: DesignBlockId, color: Color): void

Set the drop shadow color of the given design block. Required scope: ‘appearance/shadow’

  • id: The block whose drop shadow color should be set.
  • color: The color to set.
getDropShadowColor(id: DesignBlockId): Color

Get the drop shadow color of the given design block.

  • id: The block whose drop shadow color should be queried.
  • Returns The drop shadow color.
setDropShadowOffsetX(id: DesignBlockId, offsetX: number): void

Set the drop shadow’s X offset of the given design block. Required scope: ‘appearance/shadow’

  • id: The block whose drop shadow’s X offset should be set.
  • offsetX: The X offset to be set.
setDropShadowOffsetY(id: DesignBlockId, offsetY: number): void

Set the drop shadow’s Y offset of the given design block. Required scope: ‘appearance/shadow’

  • id: The block whose drop shadow’s Y offset should be set.
  • offsetY: The X offset to be set.
getDropShadowOffsetX(id: DesignBlockId): number

Get the drop shadow’s X offset of the given design block.

  • id: The block whose drop shadow’s X offset should be queried.
  • Returns The offset.
getDropShadowOffsetY(id: DesignBlockId): number

Get the drop shadow’s Y offset of the given design block.

  • id: The block whose drop shadow’s Y offset should be queried.
  • Returns The offset.
setDropShadowBlurRadiusX(id: DesignBlockId, blurRadiusX: number): void

Set the drop shadow’s blur radius on the X axis of the given design block. Required scope: ‘appearance/shadow’

  • id: The block whose drop shadow’s blur radius should be set.
  • blurRadiusX: The blur radius to be set.
setDropShadowBlurRadiusY(id: DesignBlockId, blurRadiusY: number): void

Set the drop shadow’s blur radius on the Y axis of the given design block. Required scope: ‘appearance/shadow’

  • id: The block whose drop shadow’s blur radius should be set.
  • blurRadiusY: The blur radius to be set.
getDropShadowBlurRadiusX(id: DesignBlockId): number

Get the drop shadow’s blur radius on the X axis of the given design block.

  • id: The block whose drop shadow’s blur radius should be queried.
  • Returns The blur radius.
getDropShadowBlurRadiusY(id: DesignBlockId): number

Get the drop shadow’s blur radius on the Y axis of the given design block.

  • id: The block whose drop shadow’s blur radius should be queried.
  • Returns The blur radius.
setDropShadowClip(id: DesignBlockId, clip: boolean): void

Set the drop shadow’s clipping of the given design block. (Only applies to shapes.)

  • id: The block whose drop shadow’s clip should be set.
  • clip: The drop shadow’s clip to be set.
getDropShadowClip(id: DesignBlockId): boolean

Get the drop shadow’s clipping of the given design block.

  • id: The block whose drop shadow’s clipping should be queried.
  • Returns The drop shadow’s clipping.

Full Code#

Here’s the full code:

// Configure a basic colored drop shadow if the block supports them
if (engine.block.supportsDropShadow(block)) {
  engine.block.setDropShadowEnabled(block, true);
  engine.block.setDropShadowColor(block, { r: 1.0, g: 0.75, b: 0.8, a: 1.0 });
  const dropShadowColor = engine.block.getDropShadowColor(block);
  engine.block.setDropShadowOffsetX(block, -10);
  engine.block.setDropShadowOffsetY(block, 5);
  const dropShadowOffsetX = engine.block.getDropShadowOffsetX(block);
  const dropShadowOffsetY = engine.block.getDropShadowOffsetY(block);
  engine.block.setDropShadowBlurRadiusX(block, -10);
  engine.block.setDropShadowBlurRadiusY(block, 5);
  engine.block.setDropShadowClip(block, false);
  const dropShadowClip = engine.block.getDropShadowClip(block);


  // Query a blocks drop shadow properties
  const dropShadowIsEnabled = engine.block.isDropShadowEnabled(block);
  const dropShadowBlurRadiusX = engine.block.getDropShadowBlurRadiusX(block);
  const dropShadowBlurRadiusY = engine.block.getDropShadowBlurRadiusY(block);
}