CSS Formatter and Beautifier

No. Formatting runs entirely in your browser with JavaScript, so your CSS never leaves your device. The page keeps working offline once it has loaded.

It tokenizes the CSS on the structural characters { } and ;. Each selector or at-rule prelude gets its own line with the opening brace, every declaration sits on its own indented line ending in a semicolon, and the closing brace drops to its own line. A blank line separates top-level rules for readability.

Yes. Rules inside @media, @supports and similar blocks are indented one extra level for each layer of nesting, so a declaration two blocks deep is indented twice. The prelude such as @media (max-width:600px) is kept on one line with its brace.

No. It only normalizes whitespace and layout. Values, colors, quoted strings, url() contents and block comments are captured verbatim by the tokenizer and never re-spaced, so hex colors, font stacks and calc() expressions come out untouched.

Yes. A final declaration written without a trailing semicolon still gets one in the output. This makes the result consistent and safe to extend, since every declaration ends the same way.

Yes. The formatter is deterministic and idempotent, so reformatting tidy CSS returns the same result without piling on extra blank lines or indentation. That makes it safe to run as a quick cleanup pass anytime.

Two spaces, four spaces, or a tab, selected with the toggle under the input. Pick whatever matches your project's code style; the choice only affects the leading whitespace, not the structure.

No. This tool only expands and beautifies CSS to make it readable. To shrink CSS for production you would use a minifier, which is the reverse operation of what this tool does.

No. It reformats whatever you paste and does not check that selectors, properties or values are valid. Malformed input is laid out as best it can, so use a linter or your browser dev tools to catch actual CSS errors.