Last updated
Formatting Options
- Indentation: 2 spaces (default), 4 spaces, or tabs
- Brace style: same line (K&R) or new line (Allman)
- Selector separation: each selector on its own line
- Blank lines between rules: yes or no
- Property sorting: none, alphabetical, or logical grouping
The CSS Formatter on TechConverter.me processes any CSS instantly in the browser. Paste your minified or messy CSS, choose your formatting preferences, and get clean, consistently formatted output ready to commit to your codebase.
Examples
Example 1: Formatting Minified CSS
/* BEFORE — minified */
*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;font-size:16px;line-height:1.5;color:#111827;background:#fff}.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
/* AFTER — formatted */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #111827;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
Example 2: Formatting Media Queries
/* BEFORE */
@media(max-width:768px){.nav{flex-direction:column;}.hero{padding:2rem 1rem;font-size:1.5rem;}.grid{grid-template-columns:1fr;}}
/* AFTER */
@media (max-width: 768px) {
.nav {
flex-direction: column;
}
.hero {
padding: 2rem 1rem;
font-size: 1.5rem;
}
.grid {
grid-template-columns: 1fr;
}
}
Example 3: Formatting SCSS with Nesting
/* BEFORE — messy SCSS */
.card{background:#fff;border-radius:8px;padding:1.5rem;
.card-header{font-size:1.25rem;font-weight:600;margin-bottom:1rem;
h2{color:#111827;}&:hover{color:#2563eb;}}
.card-body{color:#6b7280;line-height:1.6;}
&:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px);}}
/* AFTER — formatted SCSS */
.card {
border-radius: 8px;
padding: 1.5rem;
.card-header {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
h2 {
color: #111827;
}
&:hover {
color: #2563eb;
}
}
.card-body {
color: #6b7280;
line-height: 1.6;
}
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
transform: translateY(-2px);
}
}