CSS Beautifier and Minifier
Turn messy or minified CSS into clean, readable code – or minify it for production. Live syntax highlighting, CSS nesting support, colour list and error checking.
- Beautify and minify
- Syntax highlighting
- Error checking
- Runs in your browser
Your formatted CSS appears here.Formatted in your browser – your CSS is never uploaded. Press Ctrl+Enter in the input to copy the result.
Insights
Add some CSS to see its rules, colours and any problems.
How to beautify CSS
- Add your CSSPaste CSS into the left box, open a .css file or drop one onto the box. Press Sample to try it first.
- Choose Beautify or MinifyBeautify makes CSS readable with your choice of indentation and brace style. Minify strips spaces and comments for the smallest file.
- Copy or downloadThe result updates as you type. Copy it, download it as a .css file, and check Insights for errors, duplicate selectors and colours.
Beautify or minify?
| Feature | Beautify | Minify |
|---|---|---|
| Best for | Reading, editing, code reviews and learning | Production websites, where every kilobyte counts |
| Whitespace | Consistent indentation, one declaration per line | Removed wherever it isn’t needed |
| Comments | Kept (optional removal) | Removed, except /*! licence comments |
| Empty rules | Kept (optional removal) | Removed |
What the formatter understands
The tool parses your stylesheet into rules rather than just adding line breaks, so it handles strings, comments, url() values with semicolons in data URIs, escaped selectors such as Tailwind’s .md\:flex, and native CSS nesting with &. At-rules like @media, @supports, @container, @layer, @font-face and @keyframes are indented correctly, and custom property values (--brand: …) are left exactly as written.
Tips for cleaner stylesheets
- Merge rules that repeat the same selector – Insights lists them with their line numbers.
- Keep
!importantfor utilities and overrides; heavy use makes styles hard to change later. - Use the colour list to spot near-duplicates such as
#2563eband#2563ea, then replace them with a custom property. - Ship the minified file and keep the beautified one in your source code.
Frequently asked questions
What does a CSS beautifier do?
It rewrites CSS with consistent indentation, one declaration per line and tidy spacing, so minified or messy code becomes easy to read and edit. It only changes whitespace and layout – the styles themselves stay the same.
Is my CSS uploaded anywhere?
No. Formatting, minifying and checking all happen in your browser. Your code and files never leave your device.
Does it support CSS nesting, SCSS or Less?
Plain CSS and native CSS nesting are fully supported, including @media, @supports, @container, @layer and @keyframes. Simple SCSS or Less often formats fine, but // line comments, mixins and loops aren’t understood, so check the result.
Is minified CSS safe to use?
Yes. Minifying removes whitespace, comments, the last semicolon in each block and empty rules. Comments starting with /*! (usually licences) are kept, and values are not rewritten apart from the optional hex colour shortening, so the stylesheet behaves the same.
Why can sorting properties change how a page looks?
When a block mixes a shorthand and its longhand, such as margin and margin-top, the one that comes last wins. Sorting alphabetically can change that order, so only sort when you know the block doesn’t rely on it. Vendor-prefixed properties are kept just before the standard one.
What does “Shorten hex colours” do?
It writes hex colours in lowercase and uses the short form where possible, so #FFFFFF becomes #fff and #AABBCC becomes #abc. The colour is identical.
What do the Insights show?
Counts of rules, selectors, declarations and media queries, every colour used, and problems such as unclosed braces, comments or strings with their line number. It also points out selectors repeated in the same context and empty rules.
How large a file can I format?
Files up to 5 MB. Syntax highlighting switches off for outputs over about 400 KB to keep the page fast, but formatting still works.
Related tools
Last updated: