Loading…
Format or minify CSS with indentation control. Use as default CSS tool handling both directions; css-minifier URL is a noindex alias. Input: CSS ≤10MB. Returns formatted or minified CSS. 100% client-side.
CSS Formatter/Minifier is loading — interactive editor will appear here. Use examples below to try instantly once loaded.
Press ? for keyboard shortcuts
Formats and beautifies CSS code with three output modes (expanded, compact, compressed). Includes options to sort properties alphabetically or by type, sort selectors alphabetically, remove duplicate rules and properties, strip comments, control vendor prefix ordering, and convert color formats (HEX to RGBA, HSL, or named colors).
CSS codebases maintained by multiple developers quickly accumulate inconsistent formatting, duplicates, and mixed color formats. A comprehensive formatter restores consistency, reduces file size, and makes code easier to navigate without altering behavior.
This tool is part of the DevStackIO platform — a collection of free online developer tools from DevStackIO. Browse more free developer resources on DevStackIO.
Frontend developers maintaining large CSS/SCSS codebases, teams enforcing style guidelines, web designers cleaning up exported CSS, and anyone bundling CSS for production.
Paste CSS or upload a .css file via drag-and-drop
Select output format: Expanded (one prop per line), Compact (one line per rule), or Compressed (single line)
Configure sorting: toggle 'Sort Properties' (Alphabetical or By Type), 'Sort Selectors', and 'Remove Duplicates'
Enable 'Remove Comments' and configure 'Vendor Prefix Order' to your preferred standard
Use color format converter — choose target format and all matching colors are converted
Click 'Format' — output appears with summary of changes (sorted, comments removed, duplicates eliminated)
Copy formatted CSS or download as .css file
Input: 'a{color:#ff6600;margin:0;padding:0;color:#f60}' | Expanded + Sort + Remove Dupes => Output: 'a {\n color: #ff6600;\n margin: 0;\n padding: 0;\n}'Input: '/* comment */ .foo{background:red}' | Compressed + Strip Comments => Output: '.foo{background:red}'Does this handle SCSS?
Standard CSS only. Pre-compile SCSS first.
What order are vendor prefixes sorted in?
Spec-Compliant: -webkit-, -moz-, -ms-, -o-. Alphabetical: -moz-, -ms-, -o-, -webkit-.
Can I convert colors conditionally?
No, applies to ALL matching colors. Edit manually for selective conversion.
Does it fix invalid CSS?
Valid CSS is preserved. Invalid CSS may be dropped.
Authoritative specifications, standards, and in-depth reading for CSS Formatter/Minifier.
Free online JSON formatter and validator with syntax highlighting and error line numbers. Use as default for beautify+validate+minify in one place; for two-file comparison use json-diff, for schema generation use json-schema-generator. Input: JSON ≤10MB. Returns formatted JSON or line-numbered error. 100% private.
Format and validate HTML with indentation and error reporting. Use as default HTML tool; for minifying production HTML use html-minifier, for converting HTML to Markdown use html-to-markdown. Input: HTML ≤10MB. Returns formatted HTML or validation errors. 100% client-side.
Minify JS for production or beautify minified JS for debugging. Use for JS only; for JSON use json-formatter, for CSS use css-formatter. Input: JS text ≤10MB. Returns minified or beautified JS or syntax error. 100% client-side.
Free online SQL formatter with indentation and keyword casing. Format queries privately in browser.
Format and validate XML with indentation and well-formedness checks. Use for XML; for JSON use json-formatter, for XML to JSON conversion use xml-to-json. Input: XML ≤10MB. Returns formatted XML or line-numbered error. 100% client-side.
Format and validate YAML with syntax checks. Use for YAML editing; for JSON to YAML conversion use json-to-yaml, for TOML/YAML/JSON cross-conversion use toml-converter. Input: YAML ≤10MB. Returns formatted YAML or error. 100% client-side.
Analyze text for word count, readability, and language stats. Paste and get instant insights.
Compare two JSON documents and highlight added, removed, and changed keys with line-level diff. Use when comparing API responses or configs; for single-document formatting use json-formatter, for validation errors use json-validator. Input: two JSON texts ≤10MB. Returns highlighted diff. 100% client-side.