tool

CSS Formatter, Validator & Minifier

Clean your CSS without the headache. Format messy code, catch errors, and minify your stylesheets into smaller, cleaner CSS in seconds.

input

0 characters

result

paste your code and choose format or minify

Format, validate and minify CSS in one place

Paste a stylesheet, a single rule or CSS copied from browser DevTools and choose what you need: readable, consistently indented code; a check for syntax errors and unknown properties; or a compact, minified version for production. Formatting is powered by Prettier and validation by Stylelint, both running directly in your browser, so your CSS is never uploaded anywhere.

What can you do?

1. Beautify CSS
Re-indent compressed or messy CSS with two-space indentation, one declaration per line and consistent spacing around braces and colons. Rules stay in their original order.
2. Validate CSS
Find broken syntax such as a missing brace, then check for unknown properties, invalid property values, misspelled at-rules, pseudo-classes, pseudo-elements, media features and units. Errors are reported with the line and column number.
3. Minify CSS
Strip comments, line breaks and extra spaces to produce a single-line stylesheet that is smaller to download and easy to paste into an inline <style> block or a CMS field.
4. Check selector and line counts
See how many selectors and lines your stylesheet contains while you work, which is handy when comparing a file before and after clean-up.

When is a CSS formatter useful?

Most CSS that needs fixing was not written by hand in the file you're looking at. It was copied from a minified production bundle, exported from a design tool, pasted from an old project or generated by a page builder. Running it through a formatter turns a single unreadable line into a structure you can actually scan and debug.

Validation catches the mistakes browsers silently ignore. A typo like colr: red or display: flexx doesn't throw an error; the browser just drops the declaration and you're left wondering why a style isn't applied. Checking the stylesheet first points you straight to the line.

How to format or minify CSS online

1. Paste your CSS
Paste a full stylesheet or just a few rules into the input editor. Use the example button if you want to try the tool first.
2. Choose format, minify or validate
Format produces readable, indented CSS. Minify produces the smallest single-line version. Validate only checks the code without changing it.
3. Fix any reported error
The CSS is validated before it is formatted or minified. If a problem is found, the message shows the line and column so you can correct it and run the tool again.
4. Copy the result
Copy the output and paste it back into your project, theme editor or style tag.

What the CSS validator checks

Validation runs in two passes. First the code is parsed to make sure it is syntactically valid CSS. Then a set of Stylelint rules looks for values and names that browsers won't recognise.

Checks performed by the CSS validator with example mistakes
Check	Example that gets flagged	What to fix
Syntax	`.card { padding: 8px`	Add the missing closing brace or semicolon.
Unknown property	`colr: red;`	Correct the property name (color).
Invalid value for a property	`display: flexx;`	Use a value the property accepts (flex).
Unknown at-rule	`@medai screen`	Correct the at-rule (@media).
Unknown media feature	`(min-widht: 600px)`	Correct the feature name (min-width).
Unknown pseudo-class or pseudo-element	`a:hovr, p::befor`	Correct the selector (:hover, ::before).
Invalid unit	`margin: 10pxx;`	Use a valid unit such as px, rem, em, % or vh.

Formatted vs minified CSS: which one should you use?

Comparison of formatted and minified CSS
	Formatted CSS	Minified CSS
Best for	Writing, reviewing and debugging styles	Shipping styles to the browser
Comments	Kept	Removed
Whitespace	Indentation and one declaration per line	Only what CSS needs to work
Readability	Easy to scan and diff	Hard to read or edit
Where it lives	Your source files and version control	Production builds, inline <style> tags, CMS custom CSS fields

A good habit is to keep the formatted file as your source of truth and minify a copy only when you publish. If your project already uses a bundler, its CSS minifier (cssnano, Lightning CSS or esbuild) will handle this for you during the build; this tool is most useful for snippets, email templates, WordPress or Shopify custom CSS boxes and one-off files outside a build pipeline.

Example: minified CSS before and after formatting

Here is the kind of single-line CSS you might copy from a production site, and the same rules after formatting.

CSSInput

.card{padding:20px;border-radius:12px;background:#111;color:#fff}.card:hover{transform:translateY(-2px)}

CSSFormatted output

.card {
  padding: 20px;
  border-radius: 12px;
  background: #111;
  color: #fff;
}
.card:hover {
  transform: translateY(-2px);
}

Frequently asked questions

Why won't the tool format my CSS?

Your CSS is validated before it is formatted or minified, so a syntax error or an unknown property stops the process. Read the message under the editor, go to the line and column it mentions, fix the problem and try again.

Does formatting change how my CSS works?

No. Formatting only changes indentation, line breaks and spacing. Selectors, declarations and the order of your rules stay the same, so the cascade and specificity are unchanged.

Can I format SCSS or Less with this tool?

This tool is built for plain CSS, so preprocessor-only syntax such as Sass mixins, @include or Less functions may be reported as errors. Use the dedicated SCSS formatter or Less formatter on Buggerspot for those files.

How much smaller will my CSS get after minifying?

It depends on how much whitespace and how many comments the file contains. Heavily commented, well-indented stylesheets shrink the most. Files that were already compressed won't change much. Enabling gzip or Brotli compression on your server reduces transfer size further.

Should I test minified CSS before deploying it?

Yes. The minifier removes comments and whitespace with simple rules, so it is always worth loading the page once with the minified file. Pay particular attention to calc() expressions that use the + operator, because CSS requires a space on both sides of it.

Is my CSS sent to a server?

No. Prettier and Stylelint run inside your browser tab. Nothing you paste is uploaded or stored by Buggerspot.

Working on the rest of the page? These tools pair well with the CSS formatter:

SCSS Formatter, Validator & Minifier – Beautify, validate and safely minify Sass (SCSS).
Less Formatter, Validator & Minifier – Beautify, validate and safely minify Less stylesheets.
HTML Formatter, Validator & Minifier – Indent markup, catch structural errors and compact HTML.
JavaScript Formatter & Validator – Format, lint and minify JavaScript snippets.
Diff Checker – Compare two versions of text or code line by line.