Skip to content
yutils
Example

Input (minified CSS)

.btn{padding:8px 16px;border-radius:6px;background:#5b21b6;color:#fff}.btn:hover{background:#4c1d95}

Output (formatted)

.btn {
  padding: 8px 16px;
  border-radius: 6px;
  background: #5b21b6;
  color: #fff;
}
.btn:hover {
  background: #4c1d95;
}

Note

Selectors, media queries, and @keyframes all get indented. CSS-in-JS inline styles require a different tool.

Usage / FAQ

When to use

  • Restore readability for minified CSS bundles (Tailwind, CSS-in-JS, …)
  • Tidy CSS before pasting into issues or Slack
  • Visualize nested rules: media queries, @keyframes
  • Indent one-liner CSS produced by an AI
  • Use minify mode for a first-pass production compress

FAQ

Q.Does selector or property order change?
A.No. Only whitespace and indentation change — semantics are 100% preserved.
Q.Does it handle SCSS or Less?
A.Best-effort for plain CSS only. Advanced syntax like SCSS `&`, `@if`, or functions may be wrong — use a dedicated SCSS formatter (prettier) instead.
Q.Is my CSS sent anywhere?
A.No. Everything runs in the browser.
Fun facts

  • CSS was first proposed to the W3C in 1994 by Norway's Håkon Wium Lie (at CERN at the time, later CTO of Opera). Together with Bert Bos, he finalized CSS Level 1 in 1996. The simple idea of 'separate document structure (HTML) from presentation (CSS)' became the standard paradigm of web design.

    W3C — CSS

  • Starting with CSS3, the spec stopped being a single document and became **modular** — Selectors Level 4, Grid Layout, Flexbox, and the rest each evolve independently. That's why 'CSS4' doesn't officially exist — every module carries its own version.

    W3C — CSS current work

  • During the late-1990s 'browser wars,' IE and Netscape raced to ship non-standard CSS extensions, making compatibility a nightmare. One reason CSS's cascade and specificity rules look so complex today: they handle the chaotic diversity of that era consistently.

    Wikipedia — Browser wars

Related tools

See all in this category →