CSS formatter

Lay out bounded CSS rules and declarations locally without applying the stylesheet.

How it works & useful details

Conservative CSS layout

Quoted values and comments remain unchanged while rules, declaration lines, braces, and indentation are arranged for reading. Nothing is applied to this page.

This is a structural formatter, not a CSS parser, minifier, compatibility checker, or security review. Keep the original when exact whitespace in unusual syntax matters.

Private, bounded text processing

Code and markup stay as inert text in this browser. These tools do not execute JavaScript, render HTML, load URLs, install packages, contact registries, or save what you paste.

Regex patterns are limited to 500 characters and test text to 20,000 characters. Formatters and package inspection accept up to 100,000 characters; exports are capped at 200,000 characters.

About this tool

CSS formatter lays out a bounded stylesheet with consistent indentation and line breaks so it is easier to read and review. It formats rules and declarations as text and never applies the stylesheet to the page.

Because the CSS is treated as inert input, nothing is rendered and no selector is evaluated. That makes the formatter safe for stylesheets copied from anywhere.

How to use it

Paste the CSS you want to lay out.
Run the formatter to produce indented output.
Review the result and copy or download the formatted text.
Reset the workspace to format another snippet.

Worked example

@media (min-width: 640px){.card{color:rebeccapurple;padding:16px;}}

is laid out as

@media (min-width: 640px) {
  .card {
    color: rebeccapurple;
    padding: 16px;
  }
}

Each rule gets its own block, each declaration its own line, and nesting inside at-rules such as @media is indented. Quoted strings like content: "a;b" and comments are copied exactly, so a semicolon inside a string is never mistaken for the end of a declaration.

When a quick formatter is enough

Minified CSS copied from a production site, a CMS theme, an email template, or browser DevTools is hard to read and review. A readable layout makes it easy to find the rule you want to override, compare two versions in a diff, or explain a snippet to a colleague.

This is a layout tool, not a parser. It does not validate properties, reorder declarations, add vendor prefixes, or minify. For a project codebase, use the formatter your team already runs, such as Prettier or Stylelint, so everyone's files stay consistent.

Frequently asked questions

Does formatting change how the CSS behaves?

No. Only whitespace is adjusted; selectors, declarations, and values are preserved as written.

Are comments kept?

Yes. Comments are preserved, since removing them would change the source you pasted.

What is the size limit?

Up to 100,000 characters per run, with exports capped at 200,000 characters.

Is the CSS applied to this page?

No. The stylesheet is treated as text only. Nothing you paste changes how this site looks, and no url() references are loaded.