Code Formatting Tools
CSS Formatter
Rewrite a CSS stylesheet with consistent spacing and indentation. Make selectors, declarations, and nested rules easier to inspect while keeping your code in the browser.
✓ Every tool runs in your browser. We do not upload your input or output.
Keyboard shortcuts
Ctrl/⌘ + Enter: process
Ctrl/⌘ + Shift + F: full screen
Esc: exit full screen
Ctrl/⌘ + F in editor: search
How to use
- Paste CSS, upload a .css file, or load the sample rules.
- Choose two spaces, four spaces, or tabs to match your project style.
- Read the output and use a reported line and column to fix malformed syntax.
- Copy or download the formatted stylesheet after reviewing the diff.
Examples
Separate declarations
Each declaration has its own line, making additions and changes easier to spot.
.card{display:flex;gap:1rem;color:#3b82f6}.card {
display: flex;
gap: 1rem;
color: #3b82f6;
}Keep a nested media rule readable
The media rule and its inner selector receive separate indentation levels.
@media(max-width:600px){.card{display:block}}@media (max-width: 600px) {
.card {
display: block;
}
}Prepare a stylesheet for review
A compact CSS rule can be useful in a bundle but difficult to edit by hand. This formatter breaks declarations onto separate lines, spaces punctuation consistently, and indents nested blocks. It helps when you are reviewing a copied style snippet, comparing two versions of a component, or cleaning up an exported stylesheet before moving it into source control.
Choose the indentation width that matches your repository. The formatter understands ordinary CSS syntax, including selectors, at-rules, and custom properties. It may normalize spacing around selectors and values. It is a formatter, not a design checker: it does not know whether z-index: 9999 is sensible or whether a browser supports a property. It also does not optimize or minify the stylesheet.
Check output in context
CSS can depend on source order and browser parsing behavior. The formatter keeps the rule order, but a review is still appropriate before replacing a production file. Compare the generated text with the source, then test the page that uses it. A broken block or declaration can produce a parsing error with a line and column, which you can select to jump to the input location.
Processing occurs in a browser worker. The editor loads only on tool pages, and its input and output areas scroll within the shared workspace. Several-megabyte files require an explicit Process action so typing stays responsive. Copy and Download use the complete generated result even if the visible preview is shortened.
Frequently asked questions
Does this tool minify CSS?
No. It expands rules for readability. The result is usually longer than a minified production stylesheet.
Will it check whether a property exists?
No. It checks syntax needed for formatting, not browser support or the correctness of every property name.
Does it change how the page looks?
The formatter aims to preserve CSS meaning, but review the output and test it in your page before deployment.
Can it format a large stylesheet?
Yes. Formatting runs in a Web Worker, and the workspace panels keep a fixed height with internal scrolling.
Is my CSS sent to a service?
No. The file is read and formatted locally in your browser.