tigtools

CSS Formatter

Paste a stylesheet to make it readable or to shrink it. Strings, url() values and comments are handled as units, so nothing inside them breaks.

Runs in your browser No sign-up

Mode
Indentation (spaces)

Enter some input to see the result.

How to use it

  1. Paste CSS into the input box, open a .css file, or try the example.
  2. Choose Beautify for readable code or Minify for the smallest output.
  3. When beautifying, pick 2 spaces, 4 spaces or tabs.
  4. Copy the result or download it as a .css file. If braces or quotes are unbalanced, the error shows the line and column.

How it works

The formatter splits the stylesheet into tokens first: strings in single or double quotes, url(…) values, comments, braces and semicolons. Because strings and url() are single tokens, a semicolon inside a data URI or a brace inside content: "{ }" never confuses the structure, and their content is copied exactly.

Beautify puts each selector of a selector list on its own line, adds spaces around the child, sibling and adjacent combinators (>, ~, +), and writes each declaration as “property: value;” on its own line. Blocks inside @media, @supports, @layer, @container and native CSS nesting are indented one level per depth. A missing semicolon after the last declaration of a block is added. Comments are kept where they are.

Minify removes comments (except /*! … */ licence notices), collapses whitespace, removes spaces around braces, colons, semicolons, commas and selector combinators, and drops the semicolon before each closing brace. Spaces that change the meaning are kept: the descendant combinator in “.a .b”, the space in “a :focus”, and the spaces inside values such as calc(100% - 2px). “! important” is normalised to “!important”.

The tool does not rewrite values: colours, units and zeros are left as written, and rules are not merged or reordered. SCSS or Less files with plain nesting usually work, but their own syntax such as // line comments or mixins is not understood.

Examples

Reading a minified framework file

Paste a one-line bootstrap.min.css excerpt and choose Beautify with 2 spaces to see each rule, the media queries and their nested rules on separate, indented lines.

Shipping a hand-written stylesheet

Minify a 12 KB stylesheet with comments and indentation before adding it inline to an email template or a page head. The summary shows the character count before and after.

Finding a missing brace

A stylesheet stops applying halfway down. The formatter reports “This { is never closed with a matching }” with the line of the rule that is missing its closing brace.

Frequently asked questions

Is minified CSS from this tool safe to use in production?

It only removes comments and whitespace that CSS ignores, so the rules behave the same. It does not do the deeper optimisations of build tools such as merging rules or shortening colours, so the result can be a little larger than theirs.

Why is a space kept in “a :focus”?

In a selector, a space is the descendant combinator. “a :focus” means a focused element inside a link, while “a:focus” means a focused link. Removing that space would change which elements match.

Can it format SCSS or Less?

Plain nested rules format correctly. Preprocessor-only syntax such as // comments, mixins with arguments or @if blocks is not understood and may be formatted oddly, so check the result.

Are licence comments removed when minifying?

Comments that start with /*! are kept, which is the usual convention for licence and copyright notices. All other comments are removed.

Privacy

Your CSS is processed only in your browser. Nothing is uploaded, stored or included in analytics.