How is this different from Prettier or stylelint?

Prettier and stylelint are great inside a project — they live in your devDependencies, run on commit, and apply your team's config. This tool is for the moment you don't have that: someone pasted a 400-line block of minified CSS in Slack, you want to read it, you don't want to spin up a sandbox. Open the page, paste, click Format. No install, no config file, no project. Output style is deliberately conservative (Prettier-ish defaults) so the result drops back into a Prettier project without re-formatting churn.

Does it preserve my comments and rule order?

Comments — yes. Both /* line */ and /* multi\n line */ comments are kept and re-emitted at their original position. Rule order — yes by default. The optional "Sort properties" toggle only sorts declarations *within* a rule alphabetically (color, font, margin, z-index…); the order of selectors themselves is never touched, because reordering selectors changes cascade and can break your layout. @media and @keyframes blocks also keep source order.

Will it modify my CSS values — shorten hex colors, drop units, etc.?

No. This is a formatter, not an optimizer. `#ffffff` stays `#ffffff` (not `#fff`). `0px` stays `0px` (not `0`). `0.5rem` stays `0.5rem` (not `.5rem`). Vendor prefixes are kept as written. If you want value-level optimization, run csso or cssnano in your build. Keeping values byte-identical means you can format-then-diff with confidence.

Is my CSS uploaded to a server?

No. Every byte stays in your browser tab. There is no network request for the formatting itself, no logging, no analytics on the content you paste. Open DevTools → Network while using the tool to verify zero requests on Format / Minify / Copy. Safe for unreleased design tokens, internal theme files, or anything under NDA.

Does it handle SCSS, LESS, or nested rules?

Native CSS nesting (the standardized `&` syntax now shipping in all evergreen browsers) — yes, the brace-based tokenizer follows nested blocks correctly. SCSS / LESS — partially. Plain nested selectors and `@media` interpolation work because they share CSS's brace structure. SCSS-only syntax (mixins with `@include`, `$variables`, `%placeholders`, `@if` directives) is preserved verbatim — not rewritten, not broken, but not pretty-formatted either. For full SCSS, use Prettier with the SCSS parser.

Reading a 400-line minified theme someone pasted in Slack

A teammate drops a single-line, 18KB compiled CSS bundle and asks "why is the button blue here?". You paste it, click Format with 2-space indent, and now you can scan selectors and find the one `.btn { background: #2563eb }` rule in seconds instead of squinting at a wall of semicolons.

Shrinking a critical-CSS snippet for inline injection

You hand-wrote a 1.2KB above-the-fold style block to inline in ` `. Minify strips comments and whitespace down to roughly 780 bytes, so it ships inside the HTML payload without bloating first paint. Values stay byte-identical, so the rendered result is exactly what you tested.

Making a noisy CSS diff reviewable

Two developers touched the same 60-rule stylesheet and the PR diff is unreadable because indentation and property order drifted. Run both versions through Format with Sort properties on, paste back, and the diff collapses to the three lines that actually changed instead of forty cosmetic ones.

Auditing an unknown vendor stylesheet under NDA

A client ships a pre-release design system as one minified file and you need to confirm it sets no `!important` overrides on your brand tokens. Format it locally, search the expanded output, and verify, all without uploading their unreleased CSS to any third-party server.

CSS Formatter & Minifier — Pretty Print, Compress, Sort

Format and beautify CSS — sort properties, indent rules, expand or minify.

Runs locally
Category Format Converter
Best for Turning pasted content or local files into a handoff-friendly format.

Sort properties

Indent:

Input

Output

Formatted output appears here.

What this tool does

Free online CSS formatter, beautifier, and minifier. Paste raw CSS and get cleanly indented output (2 spaces, 4 spaces, or tabs). One-click minify strips every byte of whitespace and comment for production delivery. Optional alphabetic property sort gives every rule the same shape so diffs stay tiny and code review stays sane. Handles nested @media queries, @keyframes, @supports, comments, and string-literal braces — the tokenizer is brace-aware, not regex-fragile. 100% client-side: design tokens, theme overrides, and unminified vendor CSS never leave the tab.

Tool details

Input: Text + Structured content; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Download; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: No account required; Open the page and use it; whether results survive refresh depends on the tool.
Performance budget: Initial JS <= 20 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Format Converter · Developer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How CSS Formatter & Minifier fits into your work

Use it when the main problem is getting content from one practical format into another.

Conversion jobs

Turning pasted content or local files into a handoff-friendly format.
Previewing a conversion before you use it in a larger workflow.
Cleaning small format mismatches without opening a full editor.

Conversion checks

Try a small sample first when the source format is messy.
Check character encoding, separators, and line endings after conversion.
Keep the source until the converted output has been reviewed.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Reading a 400-line minified theme someone pasted in Slack
A teammate drops a single-line, 18KB compiled CSS bundle and asks "why is the button blue here?". You paste it, click Format with 2-space indent, and now you can scan selectors and find the one `.btn { background: #2563eb }` rule in seconds instead of squinting at a wall of semicolons.
Shrinking a critical-CSS snippet for inline injection
You hand-wrote a 1.2KB above-the-fold style block to inline in `<head>`. Minify strips comments and whitespace down to roughly 780 bytes, so it ships inside the HTML payload without bloating first paint. Values stay byte-identical, so the rendered result is exactly what you tested.
Making a noisy CSS diff reviewable
Two developers touched the same 60-rule stylesheet and the PR diff is unreadable because indentation and property order drifted. Run both versions through Format with Sort properties on, paste back, and the diff collapses to the three lines that actually changed instead of forty cosmetic ones.
Auditing an unknown vendor stylesheet under NDA
A client ships a pre-release design system as one minified file and you need to confirm it sets no `!important` overrides on your brand tokens. Format it locally, search the expanded output, and verify, all without uploading their unreleased CSS to any third-party server.

Common pitfalls

Expecting it to optimize values like a build tool — it keeps `#ffffff` and `0px` as written; run cssnano if you want `#fff` and `0`.
Turning on Sort properties when declaration order is load-bearing — for `border` then `border-color`, alphabetic sort can flip them; leave sort off for shorthand-then-override patterns.
Feeding it real SCSS with `@include` and `$vars` and expecting pretty output — SCSS-only syntax is preserved verbatim, not formatted; use Prettier's SCSS parser instead.

Privacy

Formatting, minifying, and sorting all run in your browser tab via a brace-aware tokenizer — the CSS you paste is never sent to a server, never logged, and never appears in the URL. Open DevTools then Network while clicking Format or Minify to confirm zero requests. Safe for unreleased design tokens, internal theme files, and NDA-bound CSS.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role

CSS Formatter & Minifier — Pretty Print, Compress, Sort

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How CSS Formatter & Minifier fits into your work

Conversion jobs

Conversion checks

Good next steps

Real-world use cases

Reading a 400-line minified theme someone pasted in Slack

Shrinking a critical-CSS snippet for inline injection

Making a noisy CSS diff reviewable

Auditing an unknown vendor stylesheet under NDA

Common pitfalls

Privacy

FAQ

XML Formatter & Validator

JSON Formatter & Validator

SQL Formatter

CSS Specificity Calculator

YAML Formatter & Validator

INI Formatter & Validator

CSS Minifier

HTML Minifier

JS Minifier

Angle Converter

Base64 Encoder & Decoder

Base64 to File Converter