CSS Formatter
Runs in browserBeautify and minify CSS instantly in the browser.
Beautify or minify CSS with optional alphabetical property sorting. See size savings after minify and export .css in one click.
CSS Formatter tool
1
Output
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
Files never leave your browser.
Drag and drop a file here, or tap to select
🔒 Runs in your browser · No uploads · Your data never leaves your device
How to use
Pick Beautify or Minify
Beautify adds indentation; Minify compacts the stylesheet and shows a before/after size hint.
Sort properties
When beautifying, optionally sort property lines alphabetically inside simple rule blocks.
Download
Copy or download .css; load an existing file with the drop zone below.
Common use cases
- Formatting CSS before a code review — Run CSS through the formatter to normalize indentation and line breaks before committing, making diffs cleaner.
- Minifying CSS for a production build — Reduce CSS file size by removing whitespace and comments before deploying to production.
Examples
One-line rule
Beautify expands declarations across lines.
Input.a{color:red;padding:8px}Output.a { color: red; padding: 8px; }
Frequently asked questions
- Does sorting work inside @media?
- Phase A sorting targets leaf blocks; complex nested rules may sort only inner simple blocks.
- Is formatting private?
- Yes. js-beautify runs locally in your browser.
Key concepts
- CSS minification
- Removing whitespace, comments, and formatting from CSS to produce the smallest possible file for faster browser downloads.
- Declaration
- A property-value pair in CSS — e.g. color: red — that applies a single style rule to an element.
Related tools
You might find these useful too.