CSS Beautifier Tool

Enter your Ugly, minified and messy Cascading Style Sheets (CSS) into the textarea above to have it beautify up and made pretty. The editor above also contains helpful line numbers and syntax highlighting. There are many option to tailor the beautifier to your personal formatting tastes.

When do you use CSS Beautifier

Often when writing HTML your indentation, spacing, and other formatting can become a bit disorganized. It is also common for multiple developers to work on a single project who have different formatting techniques. This tool is helpful for making the formatting of a file consistent. It is also common for CSS to be minified or compressor. You can use this tool to make that code look pretty and readable so it is easier to edit.

Sample CSS Code

.span10 {width: 600px }.span9 {width: 538px }.span8 {width: 476px }.span7 {width: 414px }.span6 {width: 352px }.span5 {width: 290px }.span4 {width: 228px }.span3 {width: 166px }

Sample Output Code

.span10 {
    width: 600px
}

.span9 {
    width: 538px
}

.span8 {
    width: 476px
}

.span7 {
    width: 414px
}

.span6 {
    width: 352px
}

.span5 {
    width: 290px
}

.span4 {
    width: 228px
}

.span3 {
    width: 166px
}