Gradient

Overview

Colorizes enclosed content with one continuous gradient char-by-char, where client-rendered content like the Keybind-Tag and its companions cannot, due to inherent limitations, be split up and will just be considered as an atomic unit. Check out the examples regarding common attributes over at the Rainbow-Tag, as they behave exactly the same and their documentation is therefore kept centrally.

<gradient

  phase: number(0)

  ↪ Phase-offset of the transition; 0-100%

  color: color(null)

  ↪ A color-point to be used within the gradient

  offset: number(null)

  ↪ The offset of the corresponding color-point; 0-100%

  z-index: number(null)

  ↪ The z-index of the corresponding color-point; integer

  override-colors: boolean(false)

  ↪ Whether to override already colorized members

  skip-whitespace: boolean(true)

  ↪ Whether to skip whitespace when coloring

  skip-non-text: boolean(false)

  ↪ Whether to skip atomic units like <key/>

  merge-inner: boolean(false)

  ↪ Whether to merge inner rainbows for continuity

  deep: boolean(false)

  ↪ Whether to dive into children's markup-attributes

>markup</>

When specifying Code-Blocks are only available within the browser-points on the gradient, simply specify them one each per attribute

Code-Blocks are only available within the browser

or employ the spread-operator in order to bind a dynamic list of items

Code-Blocks are only available within the browser

When not specifying any Code-Blocks are only available within the browser-values, colors will simply be spaced equidistant automatically. When specifying less offsets than colors, the provided entries are sorted ascendingly and clamped to an interval between 0 and 100; the remaining distance, if any, will be shared equidistant amongst the remaining colors. Usually though, one either specifies no offsets, or all of them, for fine-grained control. For manually specified gradients, it is recommended to specify Code-Blocks are only available within the browser- and Code-Blocks are only available within the browser-values in an alternating manner to increase readability.

Code-Blocks are only available within the browser

When specifying dynamic templates with full control, simply mark both attributes by the spread-operator and pass one list each using the environment.

Code-Blocks are only available within the browser

When it comes to z-indices, they too are assigned one-by-one to colors, meaning that if one wants to specify the third index, the prior two values need to be specified also, in order to avoid being erroneously assigned to the first. In general, it is advised to always specify the used attribute at hand for all color-points or for none, as to avoid confusion.

Examples

Two Color Gradient

The simplest form of a gradient is that between two colors.

Code-Blocks are only available within the browser

Three Color Gradient

By adding another color, the offsets along the gradient will be automatically balanced if not specified otherwise.

Code-Blocks are only available within the browser

Variable Phase Gradient

By binding the phase-offset to an environment-variable, all while altering said variable in-between calls to render, animations may be created.

Code-Blocks are only available within the browser

Variable Offset Gradient

If instead of shifting the whole gradient, just a single point (or multiple points, for that matter) on it is to be moved, simply bind the corresponding offset(s) to altering environment-variables. It is highly advised to now also employ the Code-Blocks are only available within the browser attribute as to ensure that the moving point(s) take precedence all along the gradient in order to avoid visual glitches.

Code-Blocks are only available within the browser