Skip to contentSkip to footer

Live CSS

The "Live CSS" tab in the panel gives you a full-featured (S)CSS editor that you can use to write CSS that will be applied to all panes. When there is Live CSS active, an indicator is show in the address bar.

You can format or clear your CSS and SCSS with the buttons in the top bar.

Code editor

The Live CSS code editor is fully aware of all CSS syntax and values and will provide suggestions while you type. Select a suggestion with the arrow keys, then press Tab to apply it.


You can toggle between CSS and SCSS. The SCSS is compiled on the fly. SCSS supports variables, nesting, calculation and more.

Selecting elements

Use the "select element" icon in the Live CSS header, then click on any element in any pane to get a list of all the CSS selectors defined in the site's CSS styles, along with any classes and id's on the element, and the element name itself, as suggestions for a selector.

With this, you can quickly write CSS to target a single element, or a group of elements, without needing to go to the devtools to find the right element.

Google Fonts

The Live CSS tab will automatically load in any Google font you define in your CSS, letting you quickly try out multiple fonts. All Google fonts are available as suggestions (starting with a capital) so when you type font-family: you can easily get to them.

Polypane has support for variable fonts served by Google Fonts, and all axes are available for use.

Selecting panes

By default, the CSS is applied to all panes, but you can also select a single pane to apply the CSS to. You can use this if you want to experiment with styling, and want to compare it to the original CSS. Open two tabs side by side, and select one of the panes to apply the CSS to.


By default, the CSS will be preserved when you move away from a page, but you can uncheck the "preserve" button, and the CSS will be automatically cleared every time you navigate to a different URL.

Advanced: set a custom font-size

To set a custom font-size for the Live CSS panel, go to the Polypane settings folder here:

  • Windows: %APPDATA%/Polypane/
  • macOS: ~/Library/Application Support/Polypane/
  • Linux: ~/.config/Polypane/

Open the file polypane-livecss-state with a text editor. This file contains a JSON object with a fontSize option. Set your preferred fontsize, like 16px here, save the file and open Polypane.


Have a question about Polypane?

Contact us any time though chat, Slack or our contact form:

Contact Support

Build your next project with Polypane

  • Use all features on all plans
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Try for free
Polypane screenshot