What is the ArrayKit CSS Formatter?

It is a browser-based css formatter that beautifies or minifies CSS, SCSS and LESS with Prettier, and can sort properties alphabetically and remove duplicate declarations in plain CSS.

How do I minify CSS with the CSS Formatter?

Paste your stylesheet, choose the matching syntax mode, then select Minify to strip comments and whitespace and produce compact production CSS you can copy or download.

Does the CSS Formatter support SCSS and LESS?

Yes. Pick the syntax (CSS, SCSS or LESS) and it parses accordingly. Property sorting and de-duplication apply to plain CSS.

Can the CSS Formatter sort properties alphabetically?

Yes. In Beautify mode with CSS selected, toggle Sort props to reorder declarations alphabetically within each rule.

What engine formats the CSS?

Beautifying uses Prettier, so the output matches the same conventions Prettier applies in your editor and build tools.

Is my CSS uploaded anywhere by the CSS Formatter?

No. The css formatter runs entirely in your browser, so your stylesheets are processed locally and never leave your device.

CSS / SCSS Formatter

Beautify or minify CSS/SCSS/LESS, sort properties and remove duplicates.

Your CSS is formatted locally in your browser and nothing is uploaded to a server.

Need to beautify JavaScript too? Try the JS Formatter.

About CSS / SCSS Formatter

This css formatter beautifies or minifies CSS, SCSS and LESS using Prettier, with options to sort declarations alphabetically and remove duplicate properties. Use it as a css beautifier to clean up messy stylesheets, or as a scss formatter and less formatter when working across preprocessors. Switch to minify mode to strip comments and whitespace and produce compact production CSS. It is built for front-end developers, designers and QA engineers who need consistent, readable styles or a quick way to format css online before a commit or code review. You can choose tabs or spaces for indentation, pick the syntax that matches your file, and reuse the prettier css output anywhere. Everything is processed locally in your browser, so your stylesheets never leave your device and nothing is uploaded to a server.

Features

Beautify or minify CSS, SCSS and LESS using Prettier
Pick the syntax mode (CSS, SCSS or LESS) for accurate parsing
Sort properties alphabetically within each rule (plain CSS)
Remove duplicate declarations from plain CSS
Choose tabs or spaces for indentation
Minify mode strips comments and whitespace for production
Reformat nested rules and media queries consistently
Runs entirely in your browser

How to use the CSS / SCSS Formatter

Paste your CSS, SCSS or LESS into the input box.
Choose the syntax mode (CSS, SCSS or LESS) that matches your file.
Select Beautify to format or Minify to compact the output.
Toggle Sort props, Dedupe or Tabs to fine-tune the result.
Copy or download the formatted CSS from the output panel.

Example

Input

.btn{color:#FFF;padding:8px;color:#fff;}

Output

.btn {
  color: #fff;
  padding: 8px;
}

Beautify mode with duplicate declarations removed.

Common errors & troubleshooting

Property sorting or de-duplication has no effect on SCSS or LESS. — Sorting and removing duplicates apply to plain CSS; switch the syntax mode to CSS if you want those options to run.
The Sort props and Dedupe toggles are missing from the toolbar. — Those toggles only appear in Beautify mode with the CSS syntax selected; switch off Minify and pick CSS to reveal them.
Minified CSS is hard to edit afterwards. — Keep your original source file; minify output is meant for production, not for further editing.
Output fails to format because the wrong syntax is selected. — Match the syntax mode to your code, for example choose SCSS for nesting and variables, so Prettier parses it correctly.
Indentation does not match your project style. — Toggle the Tabs option to switch between tabs and spaces before copying.

Frequently asked questions

What is the ArrayKit CSS Formatter?: It is a browser-based css formatter that beautifies or minifies CSS, SCSS and LESS with Prettier, and can sort properties alphabetically and remove duplicate declarations in plain CSS.
How do I minify CSS with the CSS Formatter?: Paste your stylesheet, choose the matching syntax mode, then select Minify to strip comments and whitespace and produce compact production CSS you can copy or download.
Does the CSS Formatter support SCSS and LESS?: Yes. Pick the syntax (CSS, SCSS or LESS) and it parses accordingly. Property sorting and de-duplication apply to plain CSS.
Can the CSS Formatter sort properties alphabetically?: Yes. In Beautify mode with CSS selected, toggle Sort props to reorder declarations alphabetically within each rule.
What engine formats the CSS?: Beautifying uses Prettier, so the output matches the same conventions Prettier applies in your editor and build tools.
Is my CSS uploaded anywhere by the CSS Formatter?: No. The css formatter runs entirely in your browser, so your stylesheets are processed locally and never leave your device.

Related tools

JS / TS Formatter — Beautify or minify JavaScript, TypeScript and JSX/TSX with Prettier options.
HTML Formatter — Beautify or minify HTML, format inline CSS/JS, and preview the result.
XML Formatter — Beautify, minify and validate XML, and convert XML ↔ JSON.
SQL Formatter — Format SQL for MySQL, PostgreSQL, SQL Server, SQLite, BigQuery and Oracle.
CSS Color Converter — Convert between HEX, RGB and HSL with a live swatch.
Contrast Checker — Check WCAG colour contrast ratio and AA/AAA pass for any two colours.
SVG Optimizer — Minify SVG — strip comments, metadata and editor cruft, and collapse whitespace.
JSON Formatter — Beautify, minify and validate JSON with error locations.