Prettify and format messy CSS code with the CSS Prettifier Tool. Choose your indentation style, sort CSS properties, collapse blank lines, and validate input. Live preview, file import/export, and character count help you clean up your styles fast.
Paste your input above or import a file below.
No file chosen
Supported file types: .txt, .css
Total characters: 0
How to Use:
- Paste your CSS into the Input CSS box.
- Or import a
.css
or.txt
file using the Choose File button. - Adjust options such as:
- Indentation (2 spaces, 4 spaces, tab)
- Sort CSS properties alphabetically
- Collapse extra blank lines
- Validate input CSS
- The Prettified Output updates live as you type or change settings.
- Use Copy Output or Export to File to save your formatted CSS.
- Click Clear All to reset everything.
What the CSS Prettifier Tool can do:
- Formats raw or minified CSS with structured indentation.
- Sorts properties alphabetically for consistency and readability.
- Collapses unnecessary blank lines between rules.
- Performs basic validation by parsing blocks and skipping invalid ones.
- Tracks total output characters and provides instant visual feedback.
- Includes file import, export, copy, and reset controls.
Example:
Input:
body{margin:0;padding:0;}h1{color:red;font-size:2em;}
Options Enabled:
- 2 spaces indentation
- Sort CSS properties
Output:
body {
margin: 0;
padding: 0;
}
h1 {
color: red;
font-size: 2em;
}
Common Use Cases:
This tool is useful for front-end developers tidying up inline styles, reformatting compressed stylesheets, or preparing CSS for sharing or handoff. It helps make CSS easier to read, edit, and maintain.
Useful Tools & Suggestions:
After tidying up your styles with CSS Prettify, it’s easy to follow up with CSS Minifier to compress everything for production. And if you’re working on the full frontend stack, JavaScript Prettifier helps bring your scripts up to the same clean, readable standard.