Plan availability: ✓ Pro ✓ Elite ✓ Enterprise
Custom CSS lets you fine-tune the look and feel of your Simplesat web surveys so they better match your brand. You can adjust things like colors, fonts, border radius, and backgrounds - all the details that make a survey feel native to your product or website.
Here are a few examples of what's possible with custom styling:
What you can customize
Apply your brand colors and fonts
Adjust button, card, and input styling
Add background images or patterns
Fine-tune spacing, borders, and visual accents
Where to manage custom CSS
Custom CSS is managed at the Brand level.
Go to Brands in your account
Select a brand
Open the Custom CSS section
As you add or edit styles, you'll see a live preview of your survey update in real time, so you can experiment safely.
Starter CSS
This starter CSS uses CSS variables (also called CSS custom properties) only.
CSS variables are named values, such as --accent or --border-radius, that Simplesat survey styles reference internally. Changing a variable updates the survey's theme values without directly targeting or overriding individual elements.
/* Simplesat Starter Theme */
:root {
/* Core palette */
--light: #ffffff;
--dark: #313131;
--secondary: #f9f9f9;
--accent: #037fff;
/* Typography */
--font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
/* Shape */
--border-radius: 6px;
/* Survey frame */
--survey-background: var(--dark);
--survey-header-background: var(--light);
--color: var(--dark);
--color-inverted: var(--light);
/* Cards */
--card-background: var(--secondary);
--card-color: var(--color);
--card-border-radius: var(--border-radius);
--card-border: none;
--card-box-shadow: none;
/* Buttons */
--button-background: var(--accent);
--button-color: var(--light);
--button-color-hover: var(--button-color);
--button-border-radius: var(--border-radius);
/* Inputs */
--input-background: var(--light);
--input-color: var(--color);
--input-placeholder-color: #aaa;
--input-border-radius: var(--border-radius);
/* Multiple choice */
--multiple-choice-background: var(--light);
--multiple-choice-border-color: var(--accent);
--multiple-choice-border-radius: var(--border-radius);
/* Slider */
--slider-color: var(--accent);
--slider-track-height: 2rem;
--slider-thumb-diameter: 3rem;
--slider-tooltip-border-radius: var(--border-radius);
/* Thank you page */
--thank-you-header-background: var(--survey-header-background);
--thank-you-background: var(--secondary);
--thank-you-color: var(--color);
}
Need help?
If you have questions, want help writing or reviewing your CSS, or are trying to achieve a specific look and feel, just send a message to support.