> For the complete documentation index, see [llms.txt](https://docs.shopone.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles.md).

# Styles

The **Styles** option allows you to adjust and customize the appearance of elements on your website, including text, images, buttons, forms, and various types of widgets. Through **Styles**, you can change properties such as colors, fonts, borders, spacing, and other effects to ensure they align with the overall design of your landing page.

<figure><img src="/files/rIjgJA9Z8yvQ28WGC564" alt=""><figcaption></figcaption></figure>

Here is a detailed guide on how to use the **Styles** option:

* **Background:** The Background Color option allows you to set the background color for the selected element on the page.

<figure><img src="/files/jljxAII8wAxeZB2YnFUL" alt=""><figcaption></figcaption></figure>

* **Overflow**: When the content inside a section or box exceeds its size, you can adjust how the section or box handles the overflow content by using Overflow.
  * **Default**: In some browsers or certain situations, `visible` is considered the default value. This means that if you do not specify an overflow content, the browser will treat it as `visible`.
  * **Hidden**: Content that exceeds the size of the element will be cut off and not displayed outside the element's boundaries.
  * **Visible**: Content that exceeds the size of the element will be fully displayed, even if it overflows outside the boundaries of that element. This is the default value in many cases.

<figure><img src="/files/3oK4eC89LiOT6xbOcHAS" alt=""><figcaption></figcaption></figure>

* **Box Shadow**: The Box Shadow option allows you to create shadow effects for elements, making them stand out and appear more three-dimensional. You can customize the type of shadow, its position, color, opacity, and size.&#x20;

  <figure><img src="/files/yVKCJ4a5ErpHmWHaeiB8" alt=""><figcaption></figcaption></figure>

  * **Type**:
    * **Box**: This is the standard shadow type, creating a shadow around the entire element.
    * **Realistic**: This shadow type creates a more realistic shadow effect, with varying opacity and thickness.
  * **Position**:
    * **Outside**: The shadow is positioned outside the element, creating the illusion that the element is lifted off the background.
    * **Inside**: The shadow is positioned inside the element, giving the impression that the element is recessed or sunk in.
  * **Color**: You can choose the color of the shadow using a color picker. The color of the shadow can significantly affect the perception of depth.
    * **X**: Determines the degree of the shadow's offset to the left or right of the element.
    * **Y**: Determines the degree of the shadow's offset above or below the element.
    * **Blur**: Adjusts the blur of the shadow. A larger value will make the shadow softer and more diffused.
    * **Spread**: Adjusts the size of the shadow. A positive value will make the shadow spread wider, while a negative value will make the shadow narrower.