CSS Formatter
Beautify minified or hand-written CSS with Prettier — live, with precise code-frame errors and before/after stats.
About this ToolHow it works, benefits & use casesTap to collapse
Take minified, inconsistent, or hand-written CSS and turn it into clean, properly indented stylesheet code. This CSS formatter runs Prettier with its postcss parser entirely in your browser, so selectors, declarations, and at-rules are laid out consistently every time. You control the print width and tab width, switch between tabs and spaces, and choose single or double quotes for string values. Because it parses the CSS rather than reformatting with regex, a malformed rule is reported with a precise line and column and a code-frame snippet with a caret pointing at the problem instead of producing broken output. The result regenerates live as you type, a before/after line and byte count appears below, and an "already formatted" confirmation shows when no changes were needed. No upload, no sign-up — your styles stay on your machine.
How to Use
- 1Set your preferences in the Options panel: print width, tab width, tabs or spaces, and single or double quotes.
- 2Paste your CSS into the input box, or click Load example to load a minified sample.
- 3The formatted CSS regenerates live as you type or change options.
- 4Press Format CSS to confirm the result; any syntax error is shown with its line, column, and a caret code-frame.
- 5Copy the formatted CSS, download it as formatted.css, or share the URL with your input and options encoded in it.
Key Benefits
- Powered by Prettier’s postcss parser for accurate, consistent CSS formatting
- Control over print width, tab width, tabs vs. spaces, and quote style
- Parser-based, so malformed CSS is flagged with line, column, and a caret snippet
- Before/after line and byte stats, plus an "already formatted" confirmation
- Live reformatting as you edit or adjust options
- Shareable URL captures your CSS and formatting options for handoff
- Runs entirely in-browser — your stylesheets are never uploaded
Common Use Cases
- Expanding minified production CSS into readable, indented source for debugging
- Standardising the formatting of a stylesheet before committing it
- Cleaning up CSS pasted from a build output, dev tools, or another project
- Reformatting hand-written CSS to a consistent print width across a codebase
- Inspecting how Prettier would reformat a tricky selector or at-rule
Options
0 characters · live
Paste CSS above to format it live.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- Skeleton Screen GeneratorBuild layout-matched skeleton loaders (card/list/article/table) with shimmer/pulse/wave and a live preview
- Transition & Easing StudioDrag a cubic-bezier curve, play it on a live demo, and export CSS, @keyframes, Tailwind, Framer, or WAAPI
- CSS Clip Path GeneratorDraw clip-path shapes by dragging vertices on a live canvas — polygon, circle, ellipse, inset — with 25 ready-made shapes. Export CSS, SCSS, Tailwind, or JS
- Media Query GeneratorBuild media queries from feature toggles - width, orientation, dark mode, reduced motion, hover, pointer, print - and export CSS, SCSS mixins, or Tailwind variants
- Parallax Effect CalculatorBuild multi-layer parallax with pure-CSS perspective, JS scroll, or React — scrollable live preview
- Intersection Observer GeneratorGenerate IntersectionObserver code from a use-case picker (reveal, lazy-load, infinite scroll, scroll-spy, sticky, video autoplay) with a live trigger-zone diagram and vanilla/React/Vue output
It uses Prettier with the postcss parser, loaded on demand in the browser. That means it understands CSS structure — selectors, declarations, media queries, and other at-rules — and reformats them the same way Prettier would in your editor or CI pipeline.
You can set the print width (the line length Prettier targets) and tab width, choose between tabs and spaces for indentation, and pick single or double quotes for string values such as those in content or url() declarations.