{}

CSS Formatter

LOCAL · Browser-Only

Format and beautify CSS code with configurable options

Mode

Indent Style

Sort propertiesRemove duplicatesSelector per line

Input CSS0 lines

Formatted Output

·Share recipe

Was this tool helpful?

What is CSS Formatter?

Free online CSS formatter to beautify minified or messy CSS code with proper indentation, line breaks, and consistent formatting.

Supports nested rules, media queries, CSS custom properties, and modern CSS features. Configure indentation width, brace placement, and property sorting. Turns single-line CSS into readable, maintainable stylesheets. No signup required.

How to Use CSS Formatter

1Paste your CSS code into the input editor
2Select indentation options (2 spaces, 4 spaces, or tabs)
3Toggle property sorting if desired
4Copy the beautifully formatted CSS output

Frequently Asked Questions

What CSS features are supported?

The formatter handles standard CSS properties, nested selectors, media queries, @keyframes, CSS custom properties (variables), @import statements, and all modern CSS syntax.

Can it sort properties?

Yes. You can optionally sort CSS properties alphabetically within each rule block for consistent, readable code. This is purely cosmetic and doesn't affect how the CSS works.

Is this different from the CSS Minifier?

Yes - the formatter does the opposite. The CSS Minifier compresses CSS for production (removes whitespace). The CSS Formatter expands minified CSS into readable, well-indented code for development.

How do I turn minified CSS back into readable code?

Paste the single-line minified CSS, pick your indentation (2 spaces, 4 spaces, or tabs), and format. Each selector, rule, and media query is expanded onto its own indented line so you can edit it.

Share this tool

Related Tools

✨

Code Formatter

Free online code formatter - beautify and format JavaScript, CSS, HTML, and more

XML

Format xml

Free online XML formatter - format, validate, and beautify XML data with proper indentation

SQL

Sql beautifier online

Free online sql formatter - format and beautify SQL queries with proper indentation and syntax highlighting

{ }

Format json online

JSON formatter and validator online - format, beautify, and validate JSON data instantly in your browser

📸

Code Screenshot

Free online code screenshot - create beautiful code screenshots with syntax highlighting

git

Git Commit Message Generator

Free online git commit message generator - generate conventional commit messages with type, scope, and description

{}

Css optimizer

Free online CSS minifier - minify your CSS code to reduce file size and improve load times

YML

Json to yaml

Free online YAML ↔ JSON converter - convert between YAML and JSON formats with validation and formatting

Keep reading: CSS Cheat Sheet and html entities reference. Doing this in code instead? See the JSON and data endpoints.

{}