TinySandyFree Online Tools

CSS Formatter

Turn minified or untidy CSS into a readable stylesheet with one declaration per line, consistent indentation and clear nesting for @media, @supports, @layer and @font-face blocks. Strings, comments, url() values including base64 data URIs and custom properties are kept exactly as written.

Format & Validate Runs in your browser

Format Your CSS

How to Use the CSS Formatter

  1. Paste your CSS into the box.
  2. Choose the indentation, brace style and whether selectors in a list each get their own line.
  3. Press Format.
  4. Copy the result or download formatted.css. Unbalanced braces, quotes or comments are reported with their line and column.

About This Tool

Front-end developers reading a minified stylesheet, designers tweaking copied CSS, and reviewers who need a consistent layout before comparing files.

Input: CSS  ·  Output: Formatted CSS (.css).

Features and Limitations

Features

  • Handles @media, @supports, @layer, @font-face, @keyframes and CSS nesting, with correct indentation depth.
  • Never alters strings, comments, url() data URIs, custom property values or the content of calc().
  • Normalises spacing: “prop: value;”, a space after commas, spaces around child, sibling selectors and !important.
  • Reports unclosed braces, strings and comments with line and column.

Limitations

  • It formats the text; it does not check that property names or values are valid CSS.
  • A missing semicolon between two declarations on one line cannot be detected, so those two declarations stay on one line.
  • Vendor hacks and unusual syntax such as old IE filters are kept as written but may not be laid out ideally.
  • Comments are kept on their own lines; a comment that followed a declaration on the same line moves to the next line.
  • Results are computed in your browser; nothing you enter is sent to a server.

Example

a{color:red;margin:0}b,i{x:y} becomes a block for a with two declarations, a blank line, then b, and i on separate lines.

Frequently Asked Questions

Will formatting change how my CSS works?

No. Only whitespace and line breaks are changed, plus a semicolon added after the last declaration of a block, which is always valid.

Does it support CSS nesting and modern at-rules?

Yes. Nested rules and at-rules such as @layer, @container and @supports are indented according to their depth.

What happens to base64 images in url()?

They are left exactly as they are, including semicolons and commas inside the data URI.

Can it also minify?

Yes, use the CSS Minifier for the reverse operation.

Is my CSS uploaded?

No. It is processed in your browser.

Related Tools

More like this: all Format & Validate tools, all Developer & Web tools or the TinySandy home page.