Format messy or minified CSS into clean, readable code - or minify it for production. Handles media queries, keyframes, font-faces, CSS custom properties, and all modern CSS features with proper indentation.
Paste your CSS code into the input area. In 'Beautify' mode, the tool reformats the CSS with one property per line, proper indentation for nested rules (media queries, keyframes), and consistent spacing around colons and braces. Choose your indent size (2 spaces, 4 spaces, or tabs). Enable 'Sort properties' to alphabetically order CSS properties within each rule for consistency. In 'Minify' mode, the tool removes all unnecessary whitespace, comments, and optional semicolons to produce the smallest possible CSS. The output stats show rule count, property count, line count, and compression ratio.
CSS formatting is indispensable for front-end developers working with minified CSS from production bundles or third-party libraries, designers who use CSS generators and need to clean up the output, teams standardizing CSS code style across projects, developers reviewing pull requests where consistent formatting improves readability, optimizing CSS file size for production with minification, debugging CSS specificity issues where proper indentation reveals nesting structure, migrating inline styles or CSS-in-JS to standalone stylesheets, and cleaning up CSS exported from design tools like Figma or Sketch plugins.
The CSS formatter implements a character-by-character state machine that tracks context (selector, property name, property value, comment, string, at-rule). It handles CSS at-rules (@media, @keyframes, @font-face, @supports, @import, @layer, @container) with proper nesting indentation. Multi-line values (like background shorthand or grid-template-areas) are preserved. CSS custom properties (--variable-name) and var() functions are handled correctly. The minifier removes comments (/* */), collapses whitespace, removes the last semicolon before closing braces, and shortens zero values (0px → 0, 0.5 → .5). String literals (in content: '' or url('')) are never modified. At-rule blocks are properly indented for visual clarity.
No. CSS minification only removes whitespace, comments, and redundant syntax (like the last semicolon in a rule). The styles are parsed identically by browsers. However, minified CSS is much harder for humans to read, so always keep an unminified source version for development.
It's a matter of preference. Alphabetical sorting makes properties easy to find in large rules but separates related properties (like width/height or top/left). Some teams prefer logical grouping (positioning, display, box model, typography, visual). The tool supports both approaches - enable sorting for alphabetical, disable for original order.
CSS minification typically reduces file size by 15-40% depending on comment density and formatting. Well-commented CSS with lots of whitespace sees the largest savings. When combined with server-side gzip or brotli compression, total savings can reach 80-90%. For large projects, consider also removing unused CSS (tree-shaking) with tools like PurgeCSS.
Transform, format, generate, and encode data instantly. Private, fast, and always free.
Browse All Tools