> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/bonnita-documentation/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/bonnita-documentation/basic-configuration/online-store-2.0/color-gradient.md).

# Color Gradient

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

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FxBDwhiDJuTMoxxTK5OQm%2F132.jpg?alt=media\&token=2bbb2d83-64bd-4490-b698-bd5b8fe828c8)

{% 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 which you see in theme setting.

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