Gradient Colors¶

Warning

Gradient colors cannot be used for debug[color].

Detailed explanations and examples are shown for the supported types of gradients:

Linear Gradients require a start and end attributes.
Radial Gradients require a center and radius attributes.
Conical Gradients require a center attribute while the necessary angle attribute defaults to 0.

Gradients are implemented as aliases of color

Gradient specifications are implemented as aliased specification of the color attribute. So, one could specify a gradient using only the color attribute:

specifying a linear_gradient using the color attribute¶

color:
  start: { x: 50, y: 60 }
  end: { x: 150, y: 60 }
  preset: 48

However, this isn’t very readable. In the above example, there is very little to signify that we declared a linear gradient. This could also be confusing if a solid color is specified for a specific gradient:

specifying a solid color using the linear_gradient attribute¶

linear_gradient: white

Nonetheless, either form will work as long as the specified value(s) is valid (regardless of the attribute name).

in conf.py in a layout

linear gradient radial gradient conical gradient

social_cards = {
    "cards_layout_options": {
        "background_color": {
            "preset": "WideMatrix",  # (1)!
            "start": { "x": 30, "y": 30 },
            "end": { "x": 1170, "y": 600 },
        },
    },
}

This uses one of the conveniently pre-defined Preset Gradients.

Seealso

linear_gradient.preset

social_cards = {
    "cards_layout_options": {
        "background_color": {
            "preset": "WideMatrix",  # (1)!
            "center": { "x": 300, "y": 315 },
            "radius": 300,
        },
    },
}

This uses one of the conveniently pre-defined Preset Gradients.

Seealso

radial_gradient.preset

social_cards = {
    "cards_layout_options": {
        "background_color": {
            "preset": "WideMatrix",  # (1)!
            "center": { "x": 600, "y": 315 },
            "angle": 45,
        },
    },
}

This uses one of the conveniently pre-defined Preset Gradients.

Seealso

conical_gradient.preset

linear gradient radial gradient conical gradient

layers:
  - background:
      linear_gradient:
        preset: WideMatrix # (1)!
        start: { x: 30, y: 30 }
        end: { x: 1170, y: 600 }

This uses one of the conveniently pre-defined Preset Gradients.

Seealso

linear_gradient.preset

layers:
  - background:
      radial_gradient:
        preset: WideMatrix # (1)!
        center: { x: 300, y: 315 }
        radius: 300

This uses one of the conveniently pre-defined Preset Gradients.

Seealso

radial_gradient.preset

layers:
  - background:
      conical_gradient:
        preset: WideMatrix # (1)!
        center: { x: 600, y: 315 }
        angle: 45

This uses one of the conveniently pre-defined Preset Gradients.

Seealso

conical_gradient.preset