πŸ—œοΈ
πŸ”

Beautify Minified CSS for Debugging

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

Nid oes angen mewngofnodi
Input CSS Β· 565 B
Output CSS Β· 430 Bβˆ’24%
.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.

Sut Mae'n Gweithio

1
Ewch i mewn
Enter your data into the tool above. Everything stays local to your browser.
2
Proses
The tool processes your data instantly in your browser using JavaScript. No server, no waiting.
3
Lawrlwythwch
Get your result instantly. Nothing is stored after you leave the page β€” complete privacy.

Pam defnyddio ein un ni?

βœ“Hollol rhad ac am ddim - dim costau cudd, byth
βœ“Nid oes angen cyfrif, e-bost na mewngofnodi
βœ“Nid yw ffeiliau byth yn gadael eich dyfais
βœ“Dim cyfyngiadau maint ffeil o gwbl
βœ“Dim dyfrnodau ar unrhyw allbwn

Also check out…

Cwestiynau Cyffredin