CSS Formatter
100% PrivateDeveloper ToolsTurn compressed or messy CSS into readable code with one declaration per line.
Runs entirely in your browser. Your input is not uploaded to Ovatly or anywhere else.
- 1Paste your CSS into the input box.
- 2Choose an indent size of 2 or 4 spaces.
- 3Press Format CSS.
- 4Copy or download the formatted stylesheet.
Worked example
Beautifying a minified rule
Input: body{margin:0;color:red} Output: body { margin: 0; color: red }
- Formatting changes whitespace and line breaks only, never your selectors or values.
- The formatter works on plain CSS. SCSS nesting and Less variables are not supported.
- A missing closing brace can throw the indentation off; the tool tells you when the CSS cannot be formatted.
Yes, that is its main use. One-line production CSS comes out as a normally indented stylesheet.
About this tool
The CSS Formatter turns compressed or sloppily indented stylesheets into readable CSS with one declaration per line and consistent indentation. Developers use it to inspect minified production CSS, clean up copied snippets, and make hand-edits safe again.
Related tools
CSS MinifierMinify CSS safely by removing comments and wasted space without changing what it doesDeveloper ToolsOpenHTML FormatterBeautify messy HTML into clean, indented code, or minify it back down for productionDeveloper ToolsOpenJavaScript FormatterBeautify compressed or messy JavaScript into consistently indented, readable codeDeveloper ToolsOpenCSS Gradient GeneratorBuild linear, radial and conic CSS gradients visually and copy the finished codeWebsite & Webmaster ToolsOpen
Advertisement
Part of Ovatly's free tools in Developer Tools.