CSS Formatter
Format and minify CSS — with @media and nested rule support
How to Use the CSS Formatter
- Paste your CSS.
- Choose Format or Minify mode.
- Select indent style and click Format.
Formats CSS with proper indentation and line breaks, or minifies by stripping comments and whitespace. Preserves @media and nested rules.
What is CSS Formatting & Beautification?
The CSS Formatter transforms minified or disorganized Cascading Style Sheets into clean, consistently indented stylesheet code. It standardizes selector spacing, formats declaration blocks with one rule per line, sorts properties, expands shorthand properties when desired, and highlights syntax errors.
Common Uses
- Beautifying minified production CSS stylesheets for debugging and inspection
- Cleaning disorganized stylesheets before code reviews and Git commits
- Formatting CSS generated by preprocessors (Sass, Less, PostCSS)
- Organizing media queries and keyframe animations for better maintainability
Frequently Asked Questions
Does CSS formatting change stylesheet behavior or cascade priority?
No. Formatting only adjusts whitespace, indentation, and newlines. The order of selectors and declaration specificity remain identical, ensuring zero visual layout changes.
Can this tool format CSS variables and modern nesting?
Yes. It supports modern CSS features including CSS custom properties (`var(--name)`), `@media` queries, `@container` queries, and CSS Nesting.
What is the difference between CSS formatting and CSS minification?
Formatting expands code with whitespace and newlines for human readability. Minification removes all whitespace and comments to achieve the smallest possible file size for fast production delivery.
Notes from this implementation
Rules and nesting
The formatter breaks declarations onto their own lines and indents blocks. It does not autoprefix, and it does not delete unused rules. A custom property (--space) and a vendor property stay as written. If your stylesheet uses nesting (native CSS nesting or a preprocessor), a formatter that only knows flat CSS will close the brace in the wrong place. Format a copy and diff it.
The minifier for JavaScript is a different page. CSS minify and CSS format are opposites; this page is the readable direction. Values are not rewritten from hex to rgb(). Use the color converter for one color when you need that.