How to Use
- Choose a mode
Select Beautify or Minify from the toolbar.
- Enter CSS
Paste or type CSS code into the input area and click "Convert".
- Copy result
Use the "Copy" button to copy the formatted CSS to your clipboard.
CSS Formatter Examples
CSS Beautify
Input
.box{display:flex;padding:16px;color:#333}Output
.box {
display: flex;
padding: 16px;
color: #333;
}Each property is placed on its own line with proper indentation.
CSS Minify
Input
.box {
display: flex;
padding: 16px;
color: #333;
}Output
.box{display:flex;padding:16px;color:#333}All unnecessary whitespace, newlines, and comments are removed.
Features
- CSS beautify with per-property indentation
- CSS minify to strip whitespace and comments
- Configurable indent size (2 or 4 spaces)
- Proper handling of media queries and nested rules
- Option to keep or remove comments (/* */)
- Real-time preview support
- Local processing for privacy
FAQ
Does it support SCSS or Less?
This tool formats standard CSS syntax. SCSS/Less-specific features like variables and mixins may not be handled correctly.
How much size reduction can I expect from minification?
It depends on the CSS content, but minifying well-formatted CSS typically reduces file size by 20-40%.
Is my data sent to a server?
No. All processing happens locally in your browser and nothing is uploaded.