Last updated
Formatting Options
- Indentation: 2 spaces, 4 spaces, or tabs
- Property sorting: none, alphabetical, or logical grouping
- Brace style: same line (K&R) or new line (Allman)
- Blank lines between rules: yes or no
- Semicolons: always include (even on last property)
- Quotes: single or double for string values
The CSS Beautifier on TechConverter.me formats 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: Beautifying Minified CSS
Minified CSS from a build process is unreadable. The beautifier restores human-readable formatting:
/* BEFORE — minified */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;font-size:.875rem;font-weight:500;border-radius:.375rem;border:1px solid transparent;cursor:pointer;transition:all .15s ease-in-out}.btn-primary{background-color:#2563eb;color:#fff;border-color:#2563eb}.btn-primary:hover{background-color:#1d4ed8;border-color:#1d4ed8}.btn:disabled{opacity:.5;cursor:not-allowed}
/* AFTER — beautified */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .5rem 1rem;
font-size: .875rem;
font-weight: 500;
border-radius: .375rem;
border: 1px solid transparent;
cursor: pointer;
transition: all .15s ease-in-out;
}
.btn-primary {
background-color: #2563eb;
color: #fff;
border-color: #2563eb;
}
.btn-primary:hover {
background-color: #1d4ed8;
border-color: #1d4ed8;
}
.btn:disabled {
opacity: .5;
cursor: not-allowed;
}
Example 2: Fixing Inconsistent Formatting
CSS written by multiple developers over time often has inconsistent formatting:
/* BEFORE — inconsistent formatting */
.card{
background: white;
padding: 20px;
border-radius:8px;
box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.card-title { font-size: 1.25rem; font-weight: 600;
color: #111827; margin-bottom: 8px; }
.card-body{
color: #6b7280;
line-height: 1.6;
}
/* AFTER — consistently formatted */
.card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}
.card-title {
font-size: 1.25rem;
font-weight: 600;
color: #111827;
margin-bottom: 8px;
}
.card-body {
color: #6b7280;
line-height: 1.6;
}
Example 3: Beautifying SCSS with Nesting
The beautifier handles SCSS nesting and preprocessor syntax correctly:
/* BEFORE — messy SCSS */
.nav{display:flex;gap:1rem;
.nav-item{list-style:none;
a{color:#374151;text-decoration:none;padding:.5rem;
&:hover{color:#2563eb;}
&.active{color:#2563eb;font-weight:600;}}}
}
/* AFTER — beautified SCSS */
.nav {
display: flex;
gap: 1rem;
.nav-item {
list-style: none;
a {
color: #374151;
text-decoration: none;
padding: .5rem;
&:hover {
color: #2563eb;
}
&.active {
color: #2563eb;
font-weight: 600;
}
}
}
}