Effect Functions

List of available effect functions that can be combined to build a layer effect

Referenced by: Scale Dependent Effect, Effect

Properties

One of:

Effect functions brightness, contrast, grayscale, invert, opacity, saturate, and sepia.

Property Details
type Effect type. Valid values: brightness, contrast, grayscale, invert, opacity, saturate, and sepia.
amount Amount of effect. A value of 0 leaves the input unchanged. grayscale, invert, sepia, and opacity effects accept a maximum amount of 1 which applies the effect at 100%. brightness, contrast, and saturate can accept amount above 1. Negative values are not allowed.

Effect function hue-rotate

Property Details
type Effect type. Valid value of this property hue-rotate.
angle The relative change in hue as an angle in degree. A value of 0 leaves the input unchanged. A positive hue rotation increases the hue value, while a negative one decreases the hue value.

Effect function blur

Property Details
type Effect type. Valid value of this property blur.
radius The radius of the blur in points. It defines the value of the standard deviation to the Gaussian function. Negative values are not allowed.

Effect function drop-shadow

Property Details
type Effect type. Valid value of this property drop-shadow.
xoffset The distance of the shadow on the x-axis in points.
yoffset The distance of the shadow on the y-axis in points.
blurRadius The radius of the blur in points. It defines the value of the standard deviation to the Gaussian function.
color Color is represented as a four-element array. The four elements represent values for red, green, blue, and alpha in that order. Values range from 0 through 255.

Effect function bloom

Property Details
type Effect type. Valid value of this property bloom.
strength The intensity of the bloom effect. The higher the value, the brighter the glow. Negative values are not allowed.
radius Determines the radius of the blur. Negative values are not allowed. Leaves the pixels inside the radius untouched.
threshold The minimum color luminosity for a pixel to bloom, where at 0 all pixels bloom and 1 only the pixels with 100% luminosity colors bloom.

Additional information

grayscale() Example

{
  "type": "grayscale",
  "amount": 1
}

invert(50%) Example

{
  "type": "invert",
  "amount": 0.5
}

sepia(0.5) Example

{
  "type": "invert",
  "amount": 0.5
}

hue-rotate(60deg) Example

{
  "type": "hue-rotate",
  "angle": 60
}

blur(10px) Example

{
  "type": "blur",
  "radius": 7.5
}

drop-shadow(2pt 1pt 2pt black) Example

{
  "type": "drop-shadow",
  "xoffset": 2,
  "yoffset": 1,
  "blurRadius": 2,
  "color": [
    0,
    0,
    0,
    255
  ]
}

bloom(200% 2pt 60%) Example

{
  "type": "bloom",
  "strength": 2,
  "radius": 2,
  "threshold": 0.6
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.