> 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. 

![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FuWt8KQx343Dh5SjKCdZD%2Fcolor-gradient-2.png?alt=media\&token=f3c0c29e-20f7-47db-bcca-cdff3a4d7a70)

{% 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 %}

![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FdccxYd0Y4WWXGEatTIF2%2Fcolor-gradient-1.gif?alt=media\&token=1690dbb0-6101-4af5-82d2-1612296f4381)

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

![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FVWe50qpAXSuweAbgptxU%2Fcolor-gradient-1.png?alt=media\&token=119fda3e-93e9-4713-934d-4f00de159956)