Code Beautifier (HTML & CSS)
Paste messy or minified HTML or CSS and get it re-indented and readable.
Paste a block of cramped or minified HTML or CSS and this tool re-indents it into something you can actually read. It figures out which of the two you've pasted and formats accordingly — nesting HTML tags with indentation, or putting each CSS declaration on its own indented line. It's the counterpart to a minifier: where minifying strips structure out, beautifying puts it back. Everything runs in your browser.
HTML and CSS, auto-detected
The tool decides what you pasted by a simple test: if the code starts with a < it treats it as HTML and indents each nested element by four spaces, keeping self-closing and void tags like <img>, <br>, <input>, <link> and <meta> from adding a level. Otherwise it treats the input as CSS, breaking rules onto multiple lines with each property indented and a blank line between blocks. Copy the formatted result with one click.
What it handles best — and its limits
It's built for HTML and CSS specifically, so it won't format JavaScript, JSON, PHP or other languages. It also formats by recognising structural characters rather than fully parsing the language, so ordinary markup and stylesheets come out clean, but deeply irregular input — inline scripts inside HTML, or CSS with unusual comment placement — may not be perfect. For everyday tidying of markup and styles it's fast and dependable; for other languages, reach for a language-specific formatter.
Frequently Asked Questions
How does it know whether I pasted HTML or CSS?
It checks the first character: if the code begins with "<" it is formatted as HTML, otherwise as CSS. So paste HTML that starts with a tag, and CSS that starts with a selector, for the right result.
Can it beautify JavaScript or JSON?
No. This tool only formats HTML and CSS. For JavaScript or JSON, use a formatter built for those languages (for JSON, a dedicated JSON formatter will also validate it).
Does it change my code or just reformat it?
It only adds indentation and line breaks for readability — it does not rewrite your tags, selectors or values, so the code behaves exactly the same after formatting.
What indentation does it use?
Four spaces per nesting level for HTML, and four-space indentation for CSS declarations, with a blank line separating rule blocks.