> ## 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](/platform/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/fuXjoDPfwirx9kHD/images/surveys/general-features/overwrite-styling/step-nine.webp?fit=max&auto=format&n=fuXjoDPfwirx9kHD&q=85&s=2be256df4cbf485842e42c147f3ca4b7" alt="Styling tab in survey editor" width="1858" height="803" data-path="images/surveys/general-features/overwrite-styling/step-nine.webp" />

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

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

3. Customize your survey's style as needed:

   <img src="https://mintcdn.com/formbricks/fuXjoDPfwirx9kHD/images/surveys/general-features/overwrite-styling/step-eleven.webp?fit=max&auto=format&n=fuXjoDPfwirx9kHD&q=85&s=37bb9d16895fb2b753e4536ef589c14b" alt="Custom styling options" width="3450" height="1494" data-path="images/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 Workspace.

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/fuXjoDPfwirx9kHD/images/surveys/general-features/overwrite-styling/mario.webp?fit=max&auto=format&n=fuXjoDPfwirx9kHD&q=85&s=5e0547b8ffaedd80dc7b292160220cab" alt="Super Mario survey example" width="680" height="420" data-path="images/surveys/general-features/overwrite-styling/mario.webp" />

Hipster Living
"Does your monstera get enough water?"

<img src="https://mintcdn.com/formbricks/fuXjoDPfwirx9kHD/images/surveys/general-features/overwrite-styling/hipster-living.webp?fit=max&auto=format&n=fuXjoDPfwirx9kHD&q=85&s=ffd3f5aa2ef9362ec53b9e948d37fdfa" alt="Hipster Living survey example" width="680" height="425" data-path="images/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/fuXjoDPfwirx9kHD/images/surveys/general-features/overwrite-styling/windows-xp.webp?fit=max&auto=format&n=fuXjoDPfwirx9kHD&q=85&s=790002652b4c1d91c86463db58438d72" alt="Windows XP survey example" width="680" height="421" data-path="images/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/fuXjoDPfwirx9kHD/images/surveys/general-features/overwrite-styling/doggo.webp?fit=max&auto=format&n=fuXjoDPfwirx9kHD&q=85&s=a7a5e80008172fd435e0a5a538e763a8" alt="Dog-themed survey example" width="680" height="422" data-path="images/surveys/general-features/overwrite-styling/doggo.webp" />
