108 · Developer Tools

CSS Formatter

Paste minified or messy CSS to get one property per line and clear indentation.

How to use the css formatter

  1. Paste your CSS.
  2. Choose the indentation.
  3. Copy the formatted CSS.

What changes

Each rule gets its own block, each declaration its own line, and selectors separated by commas go on separate lines. Nested blocks such as @media are indented. Strings and url() values are never split, even if they contain semicolons.

Examples

.card{display:flex;gap:12px}

.card { display: flex; gap: 12px; }

@media (max-width:600px){…}

Indented media block

Questions

Are comments kept?

Normal comments are removed during formatting. Comments starting with /*! (licence notes) are kept.

Is my data uploaded?

No. Everything runs in your browser, so what you paste never leaves your device.