> ## Documentation Index
> Fetch the complete documentation index at: https://formbricks.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling Theme

> Keep the survey styling consistent over all surveys with a Styling Theme. Customize colors, fonts, buttons, inputs, and more to match your brand.

<Note>
  **Self-Hosting Requirements**: Uploading custom background images and brand logos requires file upload
  storage to be configured. If you're self-hosting Formbricks, make sure to [configure file
  uploads](/self-hosting/configuration/file-uploads) before using these features.
</Note>

Keep the survey styling consistent over all surveys with a Styling Theme. Customize colors, fonts, buttons, inputs, and other styling options to match your brand's aesthetic.

## Configuration

In the left side bar, you find the `Configuration` page. On this page you find the `Look & Feel` section:

<img src="https://mintcdn.com/formbricks/P5NWfpCRRtO4HQ_w/images/xm-and-surveys/core-features/styling-theme/form-css-styling.webp?fit=max&auto=format&n=P5NWfpCRRtO4HQ_w&q=85&s=b1a42a76ff272b6371183497577f3b66" alt="Look & Feel" width="2034" height="1484" data-path="images/xm-and-surveys/core-features/styling-theme/form-css-styling.webp" />

## Survey styling

The Survey styling section gives you granular control over every text and input element in your survey. Expand the **Survey styling** panel to find collapsible sub-sections for Headlines & Descriptions, Inputs, Buttons, and Options.

### Headlines & Descriptions

Fine-tune how question headlines, descriptions, and upper labels appear:

| Property                    | Description                                                  |
| --------------------------- | ------------------------------------------------------------ |
| **Headline Color**          | Color of the question headline text                          |
| **Description Color**       | Color of the question description text                       |
| **Headline Font Size**      | Font size for headlines (in `px` or any CSS unit)            |
| **Description Font Size**   | Font size for descriptions                                   |
| **Headline Font Weight**    | Numeric font weight for headlines (e.g. `400`, `600`, `700`) |
| **Description Font Weight** | Numeric font weight for descriptions                         |
| **Upper Label Color**       | Color of the small labels above input fields                 |
| **Upper Label Font Size**   | Font size for upper labels                                   |
| **Upper Label Font Weight** | Numeric font weight for upper labels                         |

### Inputs

Control the appearance of text inputs, textareas, and other form fields:

| Property                | Description                                                        |
| ----------------------- | ------------------------------------------------------------------ |
| **Input Color**         | Background color of input fields                                   |
| **Input Border Color**  | Border color of input fields                                       |
| **Input Text Color**    | Color of text typed into inputs                                    |
| **Border Radius**       | Corner roundness of input fields (in `px` or any CSS unit)         |
| **Height**              | Height of input fields                                             |
| **Font Size**           | Font size of text inside inputs                                    |
| **Padding X**           | Horizontal padding inside inputs                                   |
| **Padding Y**           | Vertical padding inside inputs                                     |
| **Placeholder Opacity** | Opacity of placeholder text (`0` to `1`)                           |
| **Shadow**              | CSS box-shadow value for inputs (e.g. `0 1px 2px rgba(0,0,0,0.1)`) |

### Buttons

Customize the submit and navigation buttons:

| Property              | Description                         |
| --------------------- | ----------------------------------- |
| **Button Background** | Background color of buttons         |
| **Button Text**       | Text color of buttons               |
| **Border Radius**     | Corner roundness of buttons         |
| **Height**            | Height of buttons                   |
| **Font Size**         | Font size of button text            |
| **Font Weight**       | Numeric font weight for button text |
| **Padding X**         | Horizontal padding inside buttons   |
| **Padding Y**         | Vertical padding inside buttons     |

### Options

Style the select options in single-select, multi-select, and similar question types:

| Property               | Description                       |
| ---------------------- | --------------------------------- |
| **Option Background**  | Background color of option items  |
| **Option Label Color** | Text color of option labels       |
| **Border Radius**      | Corner roundness of option items  |
| **Padding X**          | Horizontal padding inside options |
| **Padding Y**          | Vertical padding inside options   |
| **Font Size**          | Font size of option text          |

## Card Styling

Adjust the look of the survey card container:

| Property                  | Description                                                             |
| ------------------------- | ----------------------------------------------------------------------- |
| **Roundness**             | Corner roundness of the survey card (in `px` or any CSS unit)           |
| **Card Background Color** | Background color of the survey card                                     |
| **Card Border Color**     | Border color of the survey card                                         |
| **Add Highlight Border**  | Adds a distinct colored border for emphasis (app surveys only)          |
| **Card Arrangement**      | Layout mode for stacking cards: **Simple**, **Straight**, or **Casual** |

### Progress Bar

When the progress bar is visible (toggle **Hide Progress Bar** to control it), you can customize:

| Property                 | Description                            |
| ------------------------ | -------------------------------------- |
| **Track Background**     | Background color of the progress track |
| **Indicator Background** | Fill color of the progress indicator   |
| **Track Height**         | Height of the progress bar track       |

## Background Styling

Customize the survey background with static colors, animations, or images (upload your own or pick from Unsplash).

<Note>Background styling is only available for Link Surveys.</Note>

| Property               | Description                                                      |
| ---------------------- | ---------------------------------------------------------------- |
| **Color**              | Pick any color for the background                                |
| **Animation**          | Add dynamic animations to enhance user experience                |
| **Upload**             | Use a custom uploaded image (5 MB max)                           |
| **Image**              | Choose from Unsplash's gallery (attribution shown automatically) |
| **Background Overlay** | Adjust the background's opacity / brightness                     |

## Add Brand Logo

Customize your survey with your brand's logo.

<Note>Brand logos are only visible on Link Survey pages.</Note>

<Steps>
  <Step title="Open Logo Settings">
    In the **Look & Feel** page in Project settings, scroll down to the **Logo Upload** box.

    <img src="https://mintcdn.com/formbricks/yKl9MUpEW6O1uJ5B/images/xm-and-surveys/core-features/styling-theme/step-four.webp?fit=max&auto=format&n=yKl9MUpEW6O1uJ5B&q=85&s=09a7acfe9c055d24f4fd2785aad6f213" alt="Logo upload box" width="1021" height="358" data-path="images/xm-and-surveys/core-features/styling-theme/step-four.webp" />
  </Step>

  <Step title="Upload Your Logo">
    Upload your logo. Logos must be 5 MB or less.

    <img src="https://mintcdn.com/formbricks/yKl9MUpEW6O1uJ5B/images/xm-and-surveys/core-features/styling-theme/step-five.webp?fit=max&auto=format&n=yKl9MUpEW6O1uJ5B&q=85&s=a28323caf41515921bb9160bae89be5c" alt="Upload logo" width="963" height="409" data-path="images/xm-and-surveys/core-features/styling-theme/step-five.webp" />
  </Step>

  <Step title="Add Background Color (Optional)">
    If you've uploaded a transparent image and want to add a background to it, enable the toggle and select a color.

    <img src="https://mintcdn.com/formbricks/yKl9MUpEW6O1uJ5B/images/xm-and-surveys/core-features/styling-theme/step-six.webp?fit=max&auto=format&n=yKl9MUpEW6O1uJ5B&q=85&s=462d0b982cff68ad43743f875b2c5476" alt="Logo background color" width="961" height="485" data-path="images/xm-and-surveys/core-features/styling-theme/step-six.webp" />
  </Step>

  <Step title="Save">
    Remember to save your changes!

    <img src="https://mintcdn.com/formbricks/yKl9MUpEW6O1uJ5B/images/xm-and-surveys/core-features/styling-theme/step-seven.webp?fit=max&auto=format&n=yKl9MUpEW6O1uJ5B&q=85&s=644cf4ad055329a51ee95452f1228cc2" alt="Save changes" width="1176" height="636" data-path="images/xm-and-surveys/core-features/styling-theme/step-seven.webp" />
  </Step>
</Steps>

<Note>The logo settings apply across all Link Survey pages.</Note>

## Overwrite Styling Theme

You can allow overwriting the styling theme for individual surveys to create unique styles per survey:

<img src="https://mintcdn.com/formbricks/yKl9MUpEW6O1uJ5B/images/xm-and-surveys/core-features/styling-theme/allow-overwrite.webp?fit=max&auto=format&n=yKl9MUpEW6O1uJ5B&q=85&s=af2db5dfd5bfa39a298dfcd93a0c8033" alt="Allow overwrite toggle" width="1590" height="608" data-path="images/xm-and-surveys/core-features/styling-theme/allow-overwrite.webp" />

In the survey editor, a **Styling** tab will appear where you can overwrite the default styling theme. See the [Custom Styling](/xm-and-surveys/surveys/general-features/overwrite-styling) guide for details.

## CSS Variables Reference

Under the hood, every styling property maps to a CSS variable prefixed with `--fb-`. For App & Website Surveys, you can override these directly in your global CSS file (e.g., `globals.css`) by targeting the `#fbjs` selector.

See the full [CSS Variables Reference](/xm-and-surveys/surveys/general-features/overwrite-styling#overwrite-css-styles-for-app--website-surveys) in the Custom Styling guide.