What Does This Tool Do?

This tool cleans up HTML and CSS code. Feed it messy, minified, or poorly indented code, and it will output clean, readable, properly indented code — or the opposite, minifying your code to reduce file size for production.

How to Use It

Pick a language at the top — HTML or CSS.
Paste your code into the input box.
Click Beautify to format with proper indentation, or Minify to strip all unnecessary whitespace.
Copy or download the result.

HTML Beautify Example

Before:

<div class="card"><h2>Hello</h2><p>World</p></div>

After:

<div class="card">
  <h2>Hello</h2>
  <p>World</p>
</div>

CSS Beautify Example

Before:

.card{background:#fff;padding:20px;border-radius:8px}

After:

.card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

Beautify vs Minify

Beautify — adds whitespace, line breaks, and indentation to make code human-readable. Great for development and debugging.
Minify — removes all unnecessary whitespace (newlines, indentation, extra spaces) to make files as small as possible. Great for production and faster page loads.

Options Explained

Indent size: Choose 2, 4, or 8 spaces, or use a tab character.
Self-close void tags: When ON, HTML void elements like <br>, <img>, <input> become <br />, <img />, etc. Useful for XHTML compatibility.
Lowercase tag names: When ON, converts <DIV> to <div>. HTML5 recommends lowercase.
Preserve single blank lines: When ON, keeps one blank line between major blocks in the output. Useful for grouping visually.

Common Use Cases

Debugging minified code — beautify a minified file to understand its structure.
Cleaning up copy-paste — turn ugly snippets into readable code.
Preparing production files — minify CSS before deployment.
Learning — see how a designer structured their CSS by beautifying it.
Standardizing team code — apply a consistent format before commit.
Fixing badly formatted templates — clean up email HTML or WordPress output.

Limitations

This tool focuses on formatting, not parsing or validating. It doesn't check whether your HTML is semantically correct or your CSS is valid.
Inline <script> and <style> content inside HTML is preserved as-is (not deeply reformatted) to avoid breaking JavaScript or CSS.
CSS minification is best-effort and handles the common cases. For extremely complex CSS with shorthand properties or modern syntax, always test before deploying.

Related Tools

JSON Formatter — beautify and validate JSON.
Base64 Encoder / Decoder — encode binary data.
URL Encoder / Decoder — encode URLs and query strings.
Regex Tester — test regular expressions live.

Privacy Note

Everything runs in your browser. Your code is never uploaded to a server, never stored, and never shared.

HTML & CSS Beautifier