Linear Gradients¶

class Linear_Gradient¶

A specification for linear gradients of colors.

An optional preset gradient that has a pre-defined mapping of colors. Each preset is referenced by name (string) or by index (integer). See the Preset Gradients document for a complete list of supported values (with generated examples).

my-layout.yml¶

layers:
  - background:
      linear_gradient:
        preset: 84
        # or equivalently
        preset: PhoenixStart
        start: { x: 60, y: 60 }
        end: { x: 1140, y: 570 }

colors : Dict[Annotated[float, FieldInfo(annotation=NoneType, required=True, metadata=[Ge(ge=0.0), Le(le=1.0)])], Color]¶

A mapping of colors to their corresponding positions in the gradient. Each item in this mapping is composed of key: value pairs in which:

The key: is a position at which the color will occur in the gradient. This float must be in the range 0 to 1 inclusively. More detail about how these positional values are used is described in start and end.
The value is a solid color to use at the specified point in the gradient.

This mapping’s color positions does not have to be in any specific order. If using a preset, then this mapping will override colors in the preset’s mapping of colors. When neither the preset or colors is specified, this defaults to 0.0: black and 1.0: white.

my-layout.yml¶

layers:
  - background:
      linear_gradient:
        colors:
          0.0: red
          0.5: green
          1.0: blue
        start: { x: 60, y: 60 }
        end: { x: 1140, y: 570 }

spread : Literal['pad', 'reflect', 'repeat']¶

This attribute controls the colors’ behavior outside the gradient’s specified area. By default this is set to pad.

spread: pad spread: reflect spread: repeat

my-layout.yml¶

layers:
  - background:
      linear_gradient:
        spread: pad
        colors:
          0.0: red
          0.5: green
          1.0: blue
        start: { x: 60, y: 315 }
        end: { x: 600, y: 315 }

my-layout.yml¶

layers:
  - background:
      linear_gradient:
        spread: reflect
        colors:
          0.0: red
          0.5: green
          1.0: blue
        start: { x: 60, y: 315 }
        end: { x: 600, y: 315 }

my-layout.yml¶

layers:
  - background:
      linear_gradient:
        spread: repeat
        colors:
          0.0: red
          0.5: green
          1.0: blue
        start: { x: 60, y: 315 }
        end: { x: 600, y: 315 }

start : Offset¶: The starting position (offset) relative to the layout’s offset (the absolute top-left corner of the card). This offset corresponds to the minimum 0.0 position in the mapping of colors.

end : Offset¶: The ending position (offset) relative to the layout’s offset (the absolute top-left corner of the card). This offset corresponds to the maximum 1.0 position in the mapping of colors.