🗜️
🔍

Beautify Minified CSS for Debugging

Format compressed or minified CSS into readable code so you can inspect and debug styles.

No cal iniciar sessió
Input CSS · 565 B
Output CSS · 430 B24%
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background-color:#ffffff;border-bottom:1px solid #e2e8f0}.nav-link{color:#475569;text-decoration:none;font-size:0.875rem;font-weight:500;transition:color 0.2s ease}.nav-link:hover{color:#14b8a6}.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#f0fdfa,#e0f2fe)}
565 BInput
430 BOutput
24%Reduction

Debugging tips

🔍

Right-click → "Inspect" in browser DevTools often shows minified CSS. Paste it here to beautify it into readable, indented code for debugging.

💡

Third-party widget and plugin CSS is usually minified. Beautify it to understand the styles before overriding them in your own stylesheet.

✏️

After beautifying, use the "← Use as input" button to switch to minify mode — useful for edit-beautify-edit-minify workflows.

🧩

Beautified CSS preserves all rules exactly — no changes to selectors, values, or structure. It only adds whitespace and line breaks.

Com funciona

1
Introdueix
Enter your data into the tool above. Everything stays local to your browser.
2
Processa
The tool processes your data instantly in your browser using JavaScript. No server, no waiting.
3
Descarrega
Get your result instantly. Nothing is stored after you leave the page — complete privacy.

Per què usar la nostra?

Completament gratuït — sense costos ocults, mai
No cal compte, correu electrònic ni inici de sessió
Els fitxers no surten mai del teu dispositiu
Sense cap límit de mida de fitxer
Sense marques d'aigua en cap sortida

Also check out…

Preguntes freqüents