CSS Formatter & Minifier

CSS Formatter - Format and Beautify CSS Online

A powerful online CSS formatter and beautifier tool that helps you format, beautify, and minify CSS code. Features syntax highlighting, customizable indentation, and selector expansion options. Perfect for web developers, designers, and anyone working with stylesheets.

What is the difference between CSS formatting and minification?

Formatting (also called beautifying or pretty-printing) reorganizes your stylesheet for human readability: one declaration per line, consistent indentation, blank lines between rule blocks, and aligned colons. Minification does the opposite — it strips every byte the browser does not need: whitespace, comments, the last semicolon of each block, redundant quotes, and unused vendor prefixes. A typical Bootstrap-sized stylesheet shrinks from about 180 KB formatted to 140 KB minified, and to roughly 22 KB after gzip on top. Always check the unminified version into source control and minify as part of your build pipeline — debugging minified CSS in DevTools is painful without source maps, and source maps let you keep both worlds (minified bytes in production, original source in your debugger).

How much smaller will my CSS be after minifying, and what gzip savings can I expect?

Hand-written CSS typically shrinks 20-40% when minified — the savings come from removing indentation, line breaks, comments and the last semicolon of each block. CSS that is already compact (or already minified) saves far less. After you click Minify, this tool shows a real before/after report: your original size, the minified size, the exact bytes and percent saved, plus an estimated gzip size. The gzip figure matters most for production because servers almost always serve CSS compressed: text like CSS is highly repetitive, so gzip (or Brotli) usually cuts the minified size by a further 70-80%, meaning a 140 KB minified stylesheet often travels as roughly 20-30 KB over the wire. Treat the gzip number here as an estimate from a repetition heuristic, not a byte-exact result — your server's compression level and Brotli vs gzip choice will shift it slightly. The headline takeaway: minify to cut parse cost and source size, and always enable gzip/Brotli on the server for the bulk of the transfer savings.

Does this tool change my hex colors or rgb values?

No. This tool preserves your colors exactly as written — #FFFFFF stays #FFFFFF, rgb(255, 0, 0) stays as is, and the modern slash syntax rgb(255 0 0 / 0.5) is kept verbatim. Formatting here only realigns whitespace, indentation and line breaks; minifying only strips the bytes the browser does not need. Neither pass rewrites color tokens, so your branding values and any diff-sensitive formatting survive untouched. If you specifically want color normalization (shortening #aabbcc to #abc, lowercasing hex, or converting rgb() to hex), run a dedicated optimizer such as PostCSS with cssnano or csso in your build pipeline — those make optimizations this tool intentionally leaves to you. Remember that three-digit hex (#abc) only equals #aabbcc when each pair is identical, so #336699 can shorten to #369 but #336698 cannot.

How do CSS selectors get formatted in the output?

When you Format, each comma-separated selector goes on its own line so a long compound selector like h1, h2, h3, h4, h5, h6 is easy to scan and edit. Combinators (>, +, ~) and descendant whitespace are normalized to single spaces with consistent padding by the Prettier engine. Attribute selectors keep their original quoting, and pseudo-classes and pseudo-elements stay attached to their preceding element with no whitespace (a:hover, ::before). Your selectors are never rewritten for specificity: the tool does not drop universal selectors or otherwise alter what a selector matches, so :where() and :is() from Selectors Level 4 are preserved exactly as written (recall that :where has zero specificity while :is takes the highest specificity of its arguments). Minify keeps the same selectors and only removes the whitespace around them.

What happens to vendor prefixes like -webkit- or -moz- during formatting?

Formatting alone never adds or removes vendor prefixes — it only realigns whitespace. The bundled prefix tooling is a separate optional pass. The modern recommendation per caniuse.com is to maintain CSS targeting your supported browser matrix and let Autoprefixer or PostCSS inject the right prefixes at build time from the Browserslist config. As of 2026, most -webkit- prefixes for transforms, transitions, animations, gradients, and flexbox are unnecessary on any browser released after 2020; -ms- prefixes were specific to IE 10-11 and Edge Legacy, both end-of-life. Stripping unused prefixes can save 5-15% of CSS size on legacy codebases. This tool preserves every prefix you write (both Format and Minify leave -webkit-, -moz-, -ms- and -o- declarations exactly as authored); to actually add or remove prefixes against a Browserslist target, run Autoprefixer or PostCSS in your build step.

Should I use shorthand properties like margin: 10px 20px or longhand like margin-top, margin-right?

Shorthand wins on bytes and readability when you are setting the full set together: margin: 10px 20px is 18 bytes versus 53 for the four longhand declarations. But shorthand has a hidden footgun: it RESETS every longhand it covers, even ones you did not mention. Writing background: red later in the cascade wipes out background-image, background-repeat, background-position — all set to their initial values. This makes shorthand dangerous in component CSS where a parent rule may have set individual longhands. As a rule: use shorthand in resets and base layers where you intentionally start from zero; use longhand in component overrides where you want to change one axis without touching the others. This formatter does not convert between shorthand and longhand — it preserves your authorial intent.

How does the formatter handle modern CSS features like nesting, custom properties, and container queries?

CSS Nesting (became Baseline 2023, no preprocessor needed) is formatted with each nested rule indented one level under its parent, and the & selector preserved verbatim. Custom properties (--my-color: blue) and var() references are left untouched — even unusual values like calc(var(--x) + 10px) keep their internal whitespace, since CSS custom property values are token-preserving. Container queries (@container) get the same block formatting as @media and @supports queries, including any container-name conditions. Cascade layers (@layer base, components, utilities) preserve their declaration order, which is semantically meaningful — reordering layers would change the cascade. CSS Houdini @property registrations and @scope blocks are recognized and formatted with appropriate indentation.

Why are my comments disappearing or being moved during formatting?

Standard CSS supports only /* ... */ comments — // is invalid in pure CSS (it is a Sass/Less feature). This tool follows the convention used by most minifiers: when you Minify, regular /* comments */ are removed to save bytes, but license comments that start with /*! are kept verbatim so attribution and license headers survive in production. When you Format, all comments are preserved and kept on their own line above or beside the rule they describe. If you see comments behaving unexpectedly, check whether your source includes CSS-in-JS template literals or Sass syntax — those require different tooling. Because formatting only rearranges whitespace, reformatting the same input twice produces identical output.

What is the difference between calc(), clamp(), and min()/max() functions?

All four are math functions defined in CSS Values and Units Module 4, accepted in any length, percentage, number, or angle context. calc(100% - 20px) performs arithmetic across units the browser cannot pre-resolve. min(50vw, 800px) returns the smaller of two values — useful for capping fluid widths. max(16px, 1rem) returns the larger — useful for accessibility minimums on user-zoom-sensitive values. clamp(16px, 4vw, 32px) is the killer combo: it returns the middle value when the second argument is between the first (minimum) and third (maximum), making it the canonical way to write fluid typography without media queries. Nesting is allowed: calc(min(100%, 1200px) - 2rem). The formatter preserves whitespace inside these functions because operators require spaces on both sides per spec (calc(100% -20px) without space fails).

Key Features

• Format CSS with customizable indentation (2, 4, 8 spaces, or tabs)
• Minify CSS to reduce file size for production
• Minification savings report: original vs minified size, bytes saved, percent reduction, and estimated gzip size
• Preserves strings, url() and data: URIs intact when minifying
• Keeps @media, @supports and @container queries valid
• Keeps /*! license comments while stripping regular comments on minify
• Syntax highlighting for selectors, properties, values, and colors
• Statistics for the output (characters, lines, size)
• Copy formatted CSS to clipboard
• Download formatted CSS as .css file
• Upload CSS files for formatting
• Dark mode support
• No file size limits
• 100% client-side processing - your code never leaves your browser
• Works offline after initial load
• Mobile-friendly responsive design
• Preserves vendor prefixes and modern CSS features