Format and beautify minified CSS code with configurable indentation, brace placement, and property sorting.
Paste a minified stylesheet - one line, thousands of characters - and get the same rules back one declaration per line, with indentation that mirrors the nesting of media queries and other at-rules. The output is produced by re-emitting the input with whitespace added only at structural boundaries, so with the layout settings alone the formatted CSS is equivalent to the source. The option users most often misjudge is property sorting: it reorders declarations, and CSS applies the last matching declaration, so sorted output can render differently from the input.
A concrete input and expected output from the current implementation.
Input
.btn{display:inline-block;padding:8px 16px;color:#fff;}.btn:hover{color:#ff0;} Expected output
.btn {
display: inline-block;
padding: 8px 16px;
color: #fff;
}
.btn:hover {
color: #ff0;
} Each declaration moved to its own line with a two-space indent, and the closing brace returned to the margin. The declaration colons gained a space after them, while :hover stayed attached to .btn - that colon is part of the selector, and adding a space there would break the rule.
The input is walked token by token: a newline plus one indent step goes after every {, a newline after every ;, and a dedent before every }. Property names, values, units, comments, and selector text pass through unchanged, with only the spacing around declaration colons adjusted. Indent depth follows nesting, so an at-rule like @media visibly contains its rules.
Indentation width controls the step added per nesting level. Brace placement moves the opening brace between the end of the selector line and its own line. Property sorting is a separate switch that alphabetizes declarations within each rule; it does not touch selectors or at-rules, and it applies independently of the other two settings.
It can, and the failure is silent. Within a rule, CSS uses the last declaration that applies, so reordering matters whenever declarations overlap - margin: 10px; margin-left: 0 renders with a 0px left margin before sorting and a 10px one after. Sorting is only safe when no rule contains duplicate or overlapping declarations; if you cannot rule that out, leave sorting off.
With sorting off and valid CSS as input, yes: the tool only inserts whitespace, and whitespace between tokens carries no meaning in CSS, so cascade and rendering are unchanged. With sorting on, no guarantee. And minification steps that already ran - merging duplicate selectors, dropping comments - cannot be undone, because that information is not present in the input.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.