Canvas Linear Gradient

This Canvas Linear Gradient Operator works much like a bucket fill layer, except for the fact that there are a start and stop color. The gradient will begin at the start color and then slowly fade to the end in a direction you define with the properties. You can add a gradient color over the texture asset.

PROPERTIES

Start Is

Top

The start color begins at the top of the texture asset and then fades to the end color at the bottom side. It looks as if it is transitioning vertically downward.

Left

The start color begins at the left of the texture asset and then fades to the end color at the right side. It looks as if it is transitioning horizontally right.

Right

The start color begins at the right of the texture asset and then fades to the end color at the left side. It looks as if it is transitioning horizontally left.

Bottom

The start color begins at the bottom of the texture asset and then fades to the end color at the top side. It looks as if it is transitioning vertically upward.

Top-Left

The start color begins at the top-left of the texture asset and then fades to the end color at the bottom-right corner. It looks as if it is transitioning diagonally downward to the right.

Top-Right

The start color begins at the top-right of the texture asset and then fades to the end color at the bottom-left corner. It looks as if it is transitioning diagonally downward to the left.

Bottom-Left

The start color begins at the bottom-left of the texture asset and then fades to the end color at the top-right corner. It looks as if it is transitioning diagonally upward to the right.

Bottom-Right

The start color begins at the bottom-right of the texture asset and then fades to the end color at the top-left corner. It looks as if it is transitioning diagonally upward to the left.

Start Color

Defines the start color used for the gradient in the operator. We use a color picker that can use RGB, HSV or HEX inputs.

Start Opacity

Determines how see-through the start color is.

Numeric Range:

  • Input = 1 = Defaulted value. Completely opaque.

  • .1 - .9 = Gets more see-through the lower the value input.

  • Input = 0 = Completely see-through.

End Color

Defines the end color used for the gradient in the operator. We use a color picker that can use RGB, HSV or HEX inputs.

End Opacity

Determines how see-through the end color is.

Numeric Range:

  • Input = 1 = Defaulted value. Completely opaque.

  • .1 - .9 = Gets more see-through the lower the value input.

  • Input = 0 = Completely see-through.

X

Moves the Canvas Linear Gradient horizontally. Negative values move it left. Positive right. The Canvas Linear Gradient uses pixels.

Y

Moves the Canvas Linear Gradient vertically. Negative values move it up. Positive down. The Canvas Linear Gradient uses pixels.

Width

Scales the width of Canvas Linear Gradient uses Pixels.

Height

Scales the height of Canvas Linear Gradient uses Pixels.

Mode

Base = Layers below operator Blend = Selected canvas composite operator

Source-Over

Default setting. Draws new shapes on top of existing canvas content.

Source-In

Combines blend and base layer. Looks to where the base and blend overlap and makes everything else transparent.

Source-Out

Combines blend and base layer. Looks to where the base and blend overlap and makes that transparent.

Source-Atop

Looks to where the base and blend overlap. Then combines the section of the blend and base overlap with the base layer.

Destination-Over

Blend layer is combined behind base layer.

Destination-In

Looks to where the base and blend overlap and makes everything else transparent. The end-result is the base layer with the overlapping section used as a mask.

Destination-Out

Invert version of Destination-In. Looks to where the base and blend overlap and everything else is transparent. The end-result is the base layer with the non-overlapping section used as a mask.

Destination-Atop

Looks at where the base and blend overlap and makes everything else is transparent. End result is the base layer with the blend layer behind and the overlapping section used as a mask.

Lighter

Adds blend and base layer together and then looks at the color information in the base and blend color. It then outputs the highest value from the combination. Similar to Lighten but results are brighter.

Copy

Uses the blend layer and ignores base.

Xor

The layers are made transparent where they overlap and shown normally everywhere else.

Multiply

The blend layer is multiplied over the base resulting in a darkening effect.

Screen

The base and blend colors are inverted then multiplied against each other. The result is inverted again, giving a much brighter image overall.

Overlay

White values Lighten the base. Black values Multiple the base. Grey values have no affect.

Darken

Looks to the color information in the base and blend color. Chooses the darker values between the layers, and outputs the new result.

Lighten

Looks to the color information in the base and blend color. Chooses the lighter values between the layers, and outputs the new result.

Color-Dodge

Divides the base by an inverted blend layer. The end result depends on the values in the blend layer. The lighter the blend layer, the more the base colors are affected.

Color-Burn

Divides an inverted base by the blend layer. The end result depends on the values in the blend layer. The blend layer is darkened and contrast increased. The darker the base, the more of its color is shown in the end result.

Hard Light

Multiples or screens the colors based on the blend layer color. If the blend is lighter than 50% grey, the image is screened. If the blend is darker than 50% grey the image is multiplied. The farther away from the grey, the more intense the effect.

Soft Light

Dodges or burns the colors based on the blend layer color. If the blend is lighter than 50% grey, the image is dodged. If the blend is darker than 50% grey the image is burned. The farther away from the grey the more intense the effect. The blending mode uses a different curve to blend the color information which results in a less contrasted image.

Difference

Looks for the brighter value between the base and blend layer. Then subtracts the color information from the other layer. Blending with white inverts the base color. Blending with black produces no change.

Exclusion

Very similar to the Difference blending mode but results are lower in contrast. Blending with white inverts the base color. Blending with black produces no change.

Hue

Combines the luminance and saturation of the base but the hue of the blend layer.

Saturation

Combines the luminance and hue of the base but the saturation of the blend layer.

Color

Combines the luminance of the base but the hue and saturation of the blend layer.

Luminosity

Combines the hue and saturation of the base but the luminosity of the blend layer. The inverse of the Color blending mode

Last updated