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

# Custom Styling

> Overwrite the global styling theme for individual surveys to create unique styles for each survey.

Overwrite the global styling theme for individual surveys to create unique styles for each survey.

<Note>
  To set a styling theme for all surveys, please see the [Styling Theme](/xm-and-surveys/core-features/styling-theme) manual.
</Note>

## Overwrite Styling Theme

1. In the **Survey Editor** of the survey you want to style, navigate to the **Styling** tab:

   <img src="https://mintcdn.com/formbricks/-OXulQKHaX30TsqK/images/xm-and-surveys/surveys/general-features/overwrite-styling/step-nine.webp?fit=max&auto=format&n=-OXulQKHaX30TsqK&q=85&s=2b2d8cea2064440eebd11289ebe0849f" alt="Styling tab in survey editor" width="1858" height="803" data-path="images/xm-and-surveys/surveys/general-features/overwrite-styling/step-nine.webp" />

2. Activate the **Add Custom Styles** toggle to override the default project styling:

   <img src="https://mintcdn.com/formbricks/-OXulQKHaX30TsqK/images/xm-and-surveys/surveys/general-features/overwrite-styling/step-ten.webp?fit=max&auto=format&n=-OXulQKHaX30TsqK&q=85&s=3a4f99ade71f33a70b949cbbcb03fdd6" alt="Add Custom Styles toggle" width="946" height="440" data-path="images/xm-and-surveys/surveys/general-features/overwrite-styling/step-ten.webp" />

   />

3. Customize your survey's style as needed:

   <img src="https://mintcdn.com/formbricks/-OXulQKHaX30TsqK/images/xm-and-surveys/surveys/general-features/overwrite-styling/step-eleven.webp?fit=max&auto=format&n=-OXulQKHaX30TsqK&q=85&s=6f377e6dbd839c7149e6c47d517c010a" alt="Custom styling options" width="3450" height="1494" data-path="images/xm-and-surveys/surveys/general-features/overwrite-styling/step-eleven.webp" />

Just hit the **Save** button to apply your changes. Your survey is now ready to impress with its unique look!

## Overwrite CSS Styles for App & Website Surveys

You can overwrite the default CSS styles for app and website surveys by adding the following CSS to your global CSS file (e.g., `globals.css`):

**Do not** change the CSS variable names, as Formbricks uses them to identify styling elements. You can adjust the values to fit your design. Below are sample values for reference:

```css theme={null}
/* Overwrite Formbricks default styles */
--fb-brand-color: red;
--fb-brand-text-color: white;
--fb-border-color: green;
--fb-border-color-highlight: rgb(13, 13, 12);
--fb-focus-color: red;
--fb-heading-color: yellow;
--fb-subheading-color: green;
--fb-info-text-color: orange;
--fb-signature-text-color: blue;
--fb-survey-background-color: black;
--fb-accent-background-color: rgb(13, 13, 12);
--fb-accent-background-color-selected: red;
--fb-placeholder-color: white;
--fb-rating-fill: rgb(13, 13, 12);
--fb-rating-hover: green;
--fb-back-btn-border: blue;
--fb-submit-btn-border: transparent;
--fb-rating-selected: black;
```

Check out an example in our Demo project.

Funky Survey Examples
Super Mario
"I guess he won't let himself be limited by radio buttons and do all three things!"

<img src="https://mintcdn.com/formbricks/-OXulQKHaX30TsqK/images/xm-and-surveys/surveys/general-features/overwrite-styling/mario.webp?fit=max&auto=format&n=-OXulQKHaX30TsqK&q=85&s=e33426155ed8dd90a9eebdf68ede9cfd" alt="Super Mario survey example" width="680" height="420" data-path="images/xm-and-surveys/surveys/general-features/overwrite-styling/mario.webp" />

Hipster Living
"Does your monstera get enough water?"

<img src="https://mintcdn.com/formbricks/-OXulQKHaX30TsqK/images/xm-and-surveys/surveys/general-features/overwrite-styling/hipster-living.webp?fit=max&auto=format&n=-OXulQKHaX30TsqK&q=85&s=ad67de91e5f163d427638e6b882d2f61" alt="Hipster Living survey example" width="680" height="425" data-path="images/xm-and-surveys/surveys/general-features/overwrite-styling/hipster-living.webp" />

Windows XP
"Hach, nostalgia. It made us want to play Mafia."

<img src="https://mintcdn.com/formbricks/-OXulQKHaX30TsqK/images/xm-and-surveys/surveys/general-features/overwrite-styling/windows-xp.webp?fit=max&auto=format&n=-OXulQKHaX30TsqK&q=85&s=ba9650398c1c5c9c23388ddc176a6798" alt="Windows XP survey example" width="680" height="421" data-path="images/xm-and-surveys/surveys/general-features/overwrite-styling/windows-xp.webp" />

Who's a Good Boy?
"Things you've likely said to your dog."

<img src="https://mintcdn.com/formbricks/-OXulQKHaX30TsqK/images/xm-and-surveys/surveys/general-features/overwrite-styling/doggo.webp?fit=max&auto=format&n=-OXulQKHaX30TsqK&q=85&s=a53758fe5e028e53b78ac857570e9e13" alt="Dog-themed survey example" width="680" height="422" data-path="images/xm-and-surveys/surveys/general-features/overwrite-styling/doggo.webp" />
