Back to tools

CSS Formatter

Format and compress CSS code

Input CSS 0 characters

Formatted CSS 0 characters

Formatting Options

Indentation Size:

Brace Style:

Minification Options

Remove Comments:

Remove Whitespace:

About CSS Formatter

The CSS Formatter tool helps you clean up and organize your CSS code, making it more readable and maintainable. It can also minify your CSS to reduce file size for production environments.

Formatting Features

Indentation: Apply consistent indentation using spaces or tabs
Brace Placement: Format braces on same line or new line based on your preference
Property Sorting: Organize properties in a consistent order
Whitespace: Add proper spacing around selectors, properties, and values

Minification Features

Comment Removal: Strip out comments to reduce file size
Whitespace Removal: Eliminate unnecessary spaces, tabs, and line breaks
Semicolon Removal: Remove the last semicolon in each rule when possible

Example

Unformatted CSS:


.header{color:#333; background-color: #f5f5f5;padding: 20px;
    margin-bottom:30px;}
.nav-link{
    display:inline-block;padding:10px 15px;
color: #007bff;text-decoration: none;
}

Formatted CSS:


.header {
    color: #333;
    background-color: #f5f5f5;
    padding: 20px;
    margin-bottom: 30px;
}

.nav-link {
    display: inline-block;
    padding: 10px 15px;
    color: #007bff;
    text-decoration: none;
}

Minified CSS:

.header{color:#333;background-color:#f5f5f5;padding:20px;margin-bottom:30px}.nav-link{display:inline-block;padding:10px 15px;color:#007bff;text-decoration:none}