How to Apply Custom CSS Styles in Retool

In the Retool editor, click the gear icon in the top-left toolbar (or press Cmd+, on macOS) to open App Settings. Navigate to the Appearance section. You will see a Custom CSS text area. This CSS applies only to this app and overrides Retool's default component styles for end users when they view the published app.

Before writing CSS rules, you need to know the actual class names Retool generates. Open your app in preview mode (or use the editor preview), right-click any component, and choose Inspect Element. Look for class names beginning with _retool- (e.g., ._retool-button, ._retool-text, ._retool-table). These are the selectors you'll target. Note that Retool also generates hashed class names — ignore those and focus on the stable _retool-* prefixed names.

In the Custom CSS text area, write your CSS rule targeting the ._retool-* selector you found. Because Retool's component library uses inline styles and high-specificity CSS, nearly all property overrides require the !important flag. Without it, your styles will be silently ignored. Example to change all Button backgrounds to a custom brand color:

1/* Override primary button background */
2._retool-button-primaryButton {
3  background-color: #7C3AED !important;
4  border-color: #7C3AED !important;
5  border-radius: 8px !important;
6}
7
8/* Override button hover state */
9._retool-button-primaryButton:hover {
10  background-color: #6D28D9 !important;
11  border-color: #6D28D9 !important;
12}

For component-specific styles without affecting all components of the same type, select a component in the editor. In the Inspector panel, scroll to the Advanced section and find the CSS Class Name field. Enter a custom class name (e.g., hero-button). Then in your Custom CSS, target that class: ```css .hero-button ._retool-button-primaryButton { font-size: 18px !important; padding: 12px 24px !important; } ``` The custom class name is added to the component's wrapper div, so you can use descendant selectors to scope rules to that specific component instance.

For styles that should apply across all apps (e.g., a shared design system), navigate to Settings → Preloaded CSS/JS (top-right Settings menu, not per-app settings). Paste CSS into the Preloaded CSS text area. These rules load before any app-level CSS. App-level Custom CSS takes precedence over Preloaded CSS, so you can override globals per-app. Preloaded CSS is ideal for: importing Google Fonts, setting CSS custom properties (design tokens), and organization-wide color overrides.

1/* Preloaded CSS: org-wide design tokens */
2:root {
3  --brand-primary: #7C3AED;
4  --brand-secondary: #10B981;
5  --font-heading: 'Inter', sans-serif;
6}
7
8/* Import Google Fonts (place at top of Preloaded CSS) */
9@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

To change the overall app background, canvas area, or header bar, target the app-level container classes. The main app content area uses ._retool-app-body. The header uses ._retool-header. You can also target the app wrapper itself with body or html selectors.

1/* Change app canvas background */
2._retool-app-body {
3  background-color: #F9FAFB !important;
4}
5
6/* Style the app header/toolbar */
7._retool-header {
8  background-color: #1E1B4B !important;
9  border-bottom: 2px solid #7C3AED !important;
10}

Custom CSS in Retool supports standard CSS media queries. Use these to supplement Retool's built-in mobile layout switching. For components that don't have a separate mobile layout configured, CSS media queries let you adjust font sizes, padding, and visibility for smaller screens.

1/* Responsive text sizing */
2@media (max-width: 768px) {
3  ._retool-text {
4    font-size: 14px !important;
5  }
6  
7  /* Hide non-essential columns on mobile by targeting the column class */
8  .hide-on-mobile {
9    display: none !important;
10  }
11}