> For the complete documentation index, see [llms.txt](https://interopxyz.gitbook.io/ui-plus/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://interopxyz.gitbook.io/ui-plus/components/display/gradient.md).

# Gradient

Create a gradient legend from colors and parameters

## Description

Create a gradient legend from colors and parameters with a min and max label

{% tabs %}
{% tab title="Preview" %}
![](https://97674526-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOQQ5Dv56AckPkeQ6O9Rf%2Fuploads%2FVkkCND4fv5djPJAlZuNC%2FGradient.png?alt=media\&token=5e8892d2-58d2-4b11-92bd-9873c7164724)
{% endtab %}

{% tab title="Location" %}
**Name** | Ui Gradient

**Nickname** | Gradient

**Tab** | Ui

**Panel** | Display

**Division** | 4
{% endtab %}

{% tab title="Inputs" %}
**\*E** | **Element** (*Ui+ Element*) | An optional input for an Element. 

> If an Element is input it will be updated, if empty a new Element will be created.
>
> The input control must be of the same type as the component

**C** | **Colors** (*Colour*) | The controls gradient colors

**P** | **Parameters** (*Number*) | The controls gradient values

**L** | **Low Value** (*Text*) | The min value label for the gradient

**H** | **High Value** (*Text*) | The max value label for the gradient

**A** | **Horizontal Alignment** (*Bool*) | Is legend orientation horizontal

**T** | **Text Color** (*Colour*) | The control's text color
{% endtab %}

{% tab title="Ouputs" %}
**E** | **Element** (*Ui+ Element*) | Ui Element Control. 
{% endtab %}

{% tab title="Mode" %}
*none*
{% endtab %}
{% endtabs %}

## Usage

![](https://97674526-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOQQ5Dv56AckPkeQ6O9Rf%2Fuploads%2F08UNKBNJkJ0wzoZig4S2%2Fimage.png?alt=media\&token=74195f0d-b492-4dc9-818d-d9f657dd3e39)