# Use Gradient for Background

<figure><img src="https://content.gitbook.com/content/yDFx5dzjEzQNJN26DYHB/blobs/po6ew1UkWVlXQ5tBZ6Al/bg_gradation.gif" alt="背景色にグラデーションを使用"><figcaption><p>Gradient Background</p></figcaption></figure>

{% hint style="danger" %}
The gradient feature is experimental, with some style limitations.

Since gradient rendering can be resource-intensive, it may cause slower performance depending on the device's capability. If you experience lag, consider [disabling animations](#animshonwosuru) or not using gradients.
{% endhint %}

***

## Enable Gradient

{% hint style="info" %}
Please refer to this for instructions on [how to open the timer layout settings screen](https://docs.timer-share.com/en/customize#how-to-open-the-timer-layout-settings-screen).
{% endhint %}

To activate the gradient feature, check 'Use Gradient' in the Background settings.

<figure><img src="https://81080730-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyDFx5dzjEzQNJN26DYHB%2Fuploads%2F20Ma4shIBooZRJX3gwXt%2Fset_bg_gradation.png?alt=media&#x26;token=e7312928-b596-4b32-bb99-51299bfeb0d4" alt="グラデーション機能を有効化" width="563"><figcaption><p>Activate Gradient Feature</p></figcaption></figure>

***

## Set Animation Half-Cycle Time

Move the time cursor below the gradient preview to observe the animation's movement.

You can set the animation's half-cycle time from the bottom right of the cursor.\
The default is 300 seconds.

<figure><img src="https://content.gitbook.com/content/yDFx5dzjEzQNJN26DYHB/blobs/l1FRalmQpakorotJ05Rl/bg_gradation_anime.gif" alt="アニメーションの動きを確認"><figcaption><p>Observe Animation Movement</p></figcaption></figure>

{% hint style="danger" %}
Setting a shorter cycle time (other than 0 seconds) can increase the rendering load for gradient effects.
{% endhint %}

***

### Disable Animation

Set the half-cycle time to 0 seconds to disable the animation.

***

## Element Settings

The gradient is represented by three circular elements.

### Random Settings

Click 'Random Generate' at the bottom right of the gradient preview to create a random gradient.

<figure><img src="https://content.gitbook.com/content/yDFx5dzjEzQNJN26DYHB/blobs/YpjOMZIPmecM610uTvHn/rundom_gradation.gif" alt="グラデーションのランダム生成"><figcaption><p>Random Generate Gradient</p></figcaption></figure>

### Customize Individual Elements

You can individually customize each element's 'Color,' 'Position (x, y),' and 'Gradient Start and End Positions (s, e)' at three points: start, middle, and end of the half-cycle time.

<figure><img src="https://content.gitbook.com/content/yDFx5dzjEzQNJN26DYHB/blobs/aeZiqr12QDPup7wgQGT2/custom_bg_gradation_element.png" alt="個別エレメントのカスタマイズ"><figcaption><p>Customize Individual Elements</p></figcaption></figure>

{% hint style="info" %}
Position Settings

* **x-coordinate:** 0% at the left edge, 100% at the right edge of the screen.
* **y-coordinate:** 0% at the top edge, 100% at the bottom edge of the screen.
  {% endhint %}

{% hint style="info" %}
Gradient Start and End Positions

The gradient uses the original color up to the start position(※) and transitions to transparent at the end position(※).\
※ The percentage (%) is calculated based on the distance from the element’s center to the farthest edge of the screen.
{% endhint %}