Developer Tools
Format messy CSS into clean readable rules with indentation and line breaks.
Use this CSS Prettify tool to turn compact or messy CSS into a cleaner readable layout. It is useful for debugging copied styles, inspecting generated rules, cleaning one-line CSS, and making selectors and declarations easier to scan before editing or sharing.
Use this CSS Prettify tool to turn compact or messy CSS into a cleaner readable layout. It is useful for debugging copied styles, inspecting generated rules, cleaning one-line CSS, and making selectors and declarations easier to scan before editing or sharing.
Use css prettify when you need a fast browser-based result without extra setup. It works well for quick checks, one-off tasks, and routine formatting or calculation work.
Read step-by-step usage guidance, best practices, and common mistakes.
See common questions and answers about input, output, and tool usage.
Review practical input and output examples before running the tool.
Find similar and supporting tools for adjacent actions and follow-up tasks.
Input
body{margin:0;padding:0;}h1{color:red;} Output
body {
margin: 0;
padding: 0;
}
h1 {
color: red;
} Useful when CSS is compressed into one line.
Input
@media screen and (max-width:600px){.card{padding:12px;}} Output
@media screen and (max-width:600px) {
.card {
padding: 12px;
}
} Makes media-query styles easier to inspect.
Fix: Check whether each rule block opens and closes correctly.
Fix: Use it for readability first, then review broken syntax manually.
Fix: Review non-standard syntax carefully after formatting.
It adds indentation and line breaks to make CSS easier to read.
Yes. Both names usually mean formatting CSS into a cleaner readable layout.
No. It focuses on readability rather than full validation.
CSS Prettify makes CSS readable. CSS Minify removes whitespace to make CSS compact.
Yes. That is one of the most useful cases for this tool.