> For the complete documentation index, see [llms.txt](https://design-packs.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://design-packs.gitbook.io/docs/fundamentals/global-section-settings/setting-solid-background-colors-instead-of-gradients.md).

# Setting Solid Background Colors instead of Gradients

Learn two simple methods to set a solid background color instead of a gradient in Design Packs sections.

### Method 1: Using Color Stops

The simplest way to create a solid background:

1. Open the background color setting
2. Set both color stops to the same color:
   * Click the first color stop
   * Select your desired color
   * Click the second color stop
   * Select the same color
   * Make sure opacity is set to 100% for both stops (the field next to the Hex code)

This method works well when you want to:

* Use the color picker
* Select from your theme colors
* Save colors for later use
* Maintain consistency with your theme

<figure><img src="https://p197.p4.n0.cdn.zight.com/items/rRuKLe1w/e8fc681f-2394-4eba-b45e-a43634620ac9.gif?v=38df2efd348411e9fb7d620f58c93df3" alt=""><figcaption></figcaption></figure>

### Method 2: Using CSS Color Values

For direct color control:

1. Open the background color setting
2. Click the dropdown in the top-left corner
3. Switch from "Gradient" to "CSS"
4. Enter your color value:
   * Hex code (e.g., #FF5733)
   * RGB (e.g., rgb(255, 87, 51))
   * Color name (e.g., coral)

This method is ideal when you:

* Have specific hex codes to use
* Want to copy/paste colors
* Need to match exact brand colors
* Prefer working with CSS values

<figure><img src="https://p197.p4.n0.cdn.zight.com/items/Kou5ebAP/19c1376f-e311-433d-90a0-42a0acc4d76f.gif?v=816892925edefaf400bb57e0e6b7c08d" alt=""><figcaption></figcaption></figure>

### Examples

#### Using Color Stops

```
1. First stop: #FF5733
2. Second stop: #FF5733
Result: Solid coral background
```

#### Using CSS

```
1. Switch to CSS mode
2. Enter: #FF5733
Result: Solid coral background
```

### Tips

* Both methods produce the same result
* Choose the method that fits your workflow
* Save commonly used colors in your theme settings
* Use the method that's most comfortable for you

Need help? Contact our support team at <support@design-packs.com> for assistance.

> **Pro Tip:** The CSS method is faster when you have specific color codes, while the color stop method is better for exploring and saving theme colors.