CSS Beautifier & Minifier
Formats or minifies CSS without reordering anything, preserving the token stream exactly.
Beautifies a stylesheet so you can read it, or strips it down when you want it smaller. Both directions are checked against the token stream on every run, so the output is your stylesheet with different whitespace and nothing else — no shorthand merging, no colour shortening, no rule reordering.
CSS in
Drop a .css file
Read in this tab. Nothing is uploaded.
Formatted
Rules
5
Selectors
9
Declarations
9
At-rules
1
Custom properties
2
How to use it
Paste the CSS or drop a file
Nested at-rules, custom properties, `:is()` and modern selectors all parse. The stats bar under the panels counts rules, selectors, declarations and custom properties as you go.
Beautify with the layout you use
Indent width, one selector per line or several, a blank line between rules, comments kept or dropped. These are the four things stylesheets actually disagree about.
Or minify, and keep the licence header
The `/*!` convention marks a comment that must survive minification. The toggle honours it, and the before/after/saved figures tell you whether it was worth doing at all.
Common questions
Why does it not shorten `#ffffff` to `#fff`?
Because every "safe" rewrite has a stylesheet where it is not. Shortening colours, merging shorthands, reordering declarations and dropping "redundant" rules each change behaviour somewhere, and a minifier that quietly breaks a page is worse than one that saves fewer bytes. Gzip recovers most of the difference regardless.
What are the "lexical problems" it reports?
Places the tokeniser could not make sense of — an unclosed comment, a string that runs to the end of the file, a stray brace. They are reported with a byte offset and the formatter carries on, because a stylesheet with one broken rule is still worth reading.
Does it add vendor prefixes?
No. Prefixing needs a browser-support target and a database of what each property requires, both of which change monthly. That is Autoprefixer’s job and it needs a build step to do it honestly.
Will it survive a URL containing a semicolon?
Yes — `url(dots;grid.png)` and a `content: "{ not a block; }"` string are both tokenised as single values rather than being split on the punctuation inside them. That case is in the sample on the page precisely because naive formatters get it wrong.
Feed it from
Sprite Sheet Packer
Packs many images into one atlas and emits the CSS or JSON frame map alongside it.
HTML Beautifier & Minifier
Formats or minifies HTML, preserving inline elements and optionally collapsing whitespace.
JavaScript Beautifier & Minifier
Strips comments and whitespace from JavaScript or TypeScript without renaming anything, and re-indents a minified bundle so it can be read again.
CSS Gradient Builder
Builds linear, radial and conic gradients with draggable stops and emits the CSS, in sRGB or OKLCH.
Next
These accept what this tool produces, so the result can go straight in.
CSS Token Extractor
Pulls colours, spacings, radii and fonts out of a stylesheet and proposes a custom-property set.
HTML Beautifier & Minifier
Formats or minifies HTML, preserving inline elements and optionally collapsing whitespace.
JavaScript Beautifier & Minifier
Strips comments and whitespace from JavaScript or TypeScript without renaming anything, and re-indents a minified bundle so it can be read again.
SVG to CSS Data URI
Encodes an SVG as a CSS background data URI, escaping only what needs escaping to keep it small.
Base64 Encoder & Decoder
Encodes and decodes Base64 and Base64URL for text or files, handling UTF-8 correctly.
curl to Code
Converts a curl command into fetch, axios, Python requests, Go, PHP or PowerShell.