About

Minified CSS reduces file size for production but makes debugging and auditing nearly impossible. A single missing semicolon in a 40,000-character one-liner can cost hours of manual tracing. This tool parses raw CSS character-by-character, reconstructs proper nesting hierarchy, and outputs cleanly indented code with consistent brace placement. It handles nested at-rules (@media, @keyframes, @supports), preserves string literals and url() references, and respects comment blocks without mangling their content.

The formatter does not validate CSS syntax. It operates as a whitespace and newline normalizer that relies on bracket-depth tracking. Malformed input with unbalanced braces will produce indentation drift proportional to the mismatch count. For critical stylesheets, pair this tool with a linter. Pro tip: always prettify vendor CSS before code review to surface overrides and specificity conflicts hidden in compressed output.

Formulas

CSS prettification is a deterministic text transformation. The formatter uses a depth counter d that increments on { and decrements on }. Each line’s leading whitespace equals:

indent = char^size × d

Where char is the chosen indent character (space or tab), size is the configured indent width, and d is the current bracket depth. The tokenizer state machine recognizes five contexts: normal, comment, single-quote string, double-quote string, and url-parens. Inside string or url contexts, all characters pass through unmodified. In normal context, the formatter applies these rules in order:

{

newline + indent(d) after {newline + indent(d) after ;newline + indent(d) before }collapse(whitespace) otherwise

For selector-per-line mode, commas outside of value contexts trigger a newline. The algorithm is O(n) where n is the character count of the input.

Reference Data

Option	Values	Default	Effect
Indent Character	Spaces / Tabs	Spaces	Controls the whitespace character used for each indent level
Indent Size	1 - 8	2	Number of indent characters per nesting level
Opening Brace	Same Line / New Line	Same Line	Places { on the selector line or the next line
Blank Line Between Rules	Yes / No	Yes	Inserts an empty line between top-level rule blocks
Selector Per Line	Yes / No	Yes	Splits comma-separated selectors onto individual lines
Align Colons	Yes / No	No	Pads property names so colons align within a block
CSS Minification	Standard	-	Removes all optional whitespace and comments
Comment Handling	Preserve / Strip	Preserve	Keeps or removes /* … */ blocks
Max Line Length	Unlimited	∞	Formatter does not wrap long values; manual wrap required
Trailing Semicolon	Always	Always	Ensures last declaration in a block ends with ;
@media Nesting	Supported	-	Correctly indents rules inside nested at-rules
@keyframes	Supported	-	Formats percentage selectors and their declarations
@font-face	Supported	-	Treats as standard block with property declarations
@import / @charset	Supported	-	Preserved on individual lines at document top
String Preservation	Always	-	Content inside quotes is never modified
url() Preservation	Always	-	Paths inside url() are never modified

Frequently Asked Questions

No. The formatter only modifies whitespace characters (spaces, tabs, newlines) and optionally strips comments. Property names, values, selectors, and the order of declarations remain identical. The output is semantically equivalent to the input.

The depth counter d is clamped to a minimum of 0. If a closing brace appears without a matching opener, the indentation simply stays at zero rather than going negative. However, missing closing braces will cause all subsequent rules to be indented one level too deep. The output footer reports if the final depth is not zero, indicating a brace mismatch.

Yes. Custom properties (--my-color), calc(), var(), clamp(), nesting (CSS Nesting Module), and @layer are all treated correctly because the formatter operates at the character/token level, not against a fixed grammar. Any valid bracket-delimited block is indented.

The formatter runs in the main thread with O(n) complexity. Inputs up to approximately 2 - 3 MB of CSS (roughly 50,000 - 100,000 lines when formatted) process in under 500 ms on modern hardware. Beyond that, the UI may briefly freeze. For production-scale formatting of massive bundles, a CLI tool like Prettier is more appropriate.

Yes. Enable the Minify toggle to strip all comments, collapse whitespace to the minimum required, and output a single-line result. This is a basic safe minification that does not perform value-level optimizations (e.g., shortening #ffffff to #fff). For aggressive optimization, use a dedicated minifier like cssnano.

Each formatter has its own opinion on brace placement, blank lines, and property ordering. This tool provides configurable options for the most common preferences but does not reorder properties or enforce alphabetical sorting. The goal is structural clarity through indentation, not style enforcement.