> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/halo-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/halo-docs/online-store-2.0/color-gradient.md).

# Color Gradient

You can set up a gradient of colors in Halo Theme for visually interesting background options. 

![](/files/fUMeLsSr650AFU1GlDiL)

{% hint style="info" %}
To learn more about gradients and CSS backgrounds, refer to [Mozilla's linear gradient](https://developer.mozilla.org/fr/docs/Web/CSS/gradient/linear-gradient\(\)) and [CSS background](https://developer.mozilla.org/en-US/docs/Web/CSS/background) documentation.
{% endhint %}

## How to setup gradients?

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Select one of the gradient options.

{% hint style="info" %}
Note:

* If you haven't set up a color gradient yet, several preset options are displayed for you to choose. Select any preset gradients to open the option panel.
* If you've already set up a color gradient, then click a gradient option to open the option panel directly.
* If you did set up a mono color and want to change to gradient, please remove the color code in CSS code field. Next, click a gradient option to open the option panel directly.
  {% endhint %}

![](/files/drDTRUKgYzJDRE1iuMVi)

{% hint style="info" %}
Color gradient only works for settings having "**Custom css**" or "**Linear gradient**" in the Editor.
{% endhint %}

![](/files/Cy2okC0WzvScITKBj8rR)