About This Tool
Format messy CSS code with proper indentation, or minify CSS to reduce file size for production. This tool handles selectors, properties, media queries, and comments while maintaining valid CSS structure.
CSS Formatter & Minifier
Input CSS
Output
How to Use
- Paste your CSS code into the input area on the left
- Select your preferred indent size (2 spaces, 4 spaces, or tab)
- Click "Format" to beautify with proper indentation, or "Minify" to compress
- Copy the result using the "Copy to Clipboard" button
What This Tool Does:
- Format: Adds line breaks after each rule, indents properties, and makes CSS readable
- Minify: Removes whitespace, comments, and unnecessary characters to reduce file size
Frequently Asked Questions
What is CSS formatting?
CSS formatting adds proper indentation, line breaks, and spacing to make your stylesheets readable. Each selector gets its own block, and properties are indented for clarity.
What is CSS minification?
Minification removes all unnecessary characters from CSS without changing functionality. This includes whitespace, newlines, and comments. The result is a smaller file that loads faster.
How much can minifying reduce file size?
CSS minification typically reduces file size by 15-40%, depending on how the original CSS was written. Files with lots of comments and whitespace see the biggest savings.
Will minifying break my CSS?
No, minification preserves all CSS functionality. It only removes characters that browsers don't need to parse the styles. Your website will look exactly the same.
Does this support CSS variables and modern syntax?
Yes, this tool handles modern CSS including custom properties (CSS variables), flexbox, grid, media queries, and other current CSS features.