Inspect compressed CSS
Expand a short stylesheet to distinguish selectors, properties and values before changing a declaration. Retain project sources to recover original files and build comments.
CSS formatter and minifier
Reindent a CSS stylesheet for easier review, or minify it to produce more compact code, directly in your browser.
- Clipboard
- Export
Data not sent
This input could not be processed. Check its syntax and the limitations explained below.
Processed CSS
Was this tool useful?
How does this tool work?
Make a stylesheet easier to inspect or produce a compact version of a CSS excerpt. Both actions parse syntax instead of blindly deleting spaces and comments. A string containing semicolons, a URL or a calc() expression must remain a coherent CSS value. Results are displayed as text: rules are never applied to this page, and resources mentioned in url() or @import are not downloaded for processing.
Formatting uses structured CSS layout with two-space indentation. Recognized blocks, declaration lists and nested rules are rewritten for readability. Class names, identifiers and custom properties are not renamed to shorten the document.
Compact mode generates output from the CSS syntax tree. It removes unnecessary separators while retaining grammatical ones, including spacing around operators in calc(). Text values are not split into declarations simply because a quoted string contains : or ;.
Compact mode removes ordinary comments. Comments beginning with ! or containing @license or @preserve are retained and collected at the start of the output. If a comment instructs a particular build system, inspect the result: this tool does not interpret every bundler or preprocessor convention.
Parsing is not a certification of properties or rendering. Unknown properties, unsupported values and ineffective rules may still appear in well-formed CSS. This form targets CSS, not Sass/SCSS or Less compilation. It does not match selectors against your DOM or calculate which styles actually apply.
How to use this tool
Supply the CSS source
Paste rules or import a .css file. Remove <style> tags from HTML snippets: this form expects stylesheet content rather than a complete page.
Choose a presentation
Format for review or use compact output to shorten the text. If parsing fails, check strings, parentheses, comments and braces.
Inspect sensitive declarations
Review URLs, calculated expressions and retained comments before copying or downloading. New input hides old output; reset clears both fields.
Use cases
Share a layout example
Present readable rules in a review or issue. Formatted CSS does not include the HTML elements needed to reproduce the behavior.
Prepare a standalone compact excerpt
Reduce layout whitespace in stable CSS. This neither removes unused rules nor replaces network compression.
Examples
Expand a simple rule
The a selector and color keep their roles. Formatting places the declaration on its own line with two-space indentation.
Input
a { color: red; }Result
a {
color: red;
}
Compact without breaking strings or calc()
The text a; b: { } remains one string. The subtraction in calc(100% - 2px) retains the necessary separators around its operator.
Input
a { content: "a; b: { }"; width: calc(100% - 2px); }Result
a{content:"a; b: { }";width:calc(100% - 2px)}Tips and best practices
- Check rendering in your application afterward. The tool cannot see competing styles, page dimensions or the resulting cascade.
- Relative URLs retain their written value, but the referenced resource depends on where you install the stylesheet.
- Compile SCSS or Less with your normal toolchain first, then submit the resulting CSS here.
- Keep original sources and maps separately. This form produces CSS text without rebuilding source maps for your project.
Sources and references
- CSS Syntax Module Level 3 — Editor’s Draft (opens in a new tab), W3C CSS Working GroupPage in English
Frequently asked questions
Why does compact output still contain spaces?
Some spaces separate tokens required by CSS grammar. Removing them from calc(100% - 2px), for example, can make an expression invalid. Compact does not mean removing every space.
Which comments survive compact mode?
Comments marked with !, @license or @preserve are kept at the start. Other comments are removed. Check special directives used by your build system.
Can I format Sass or Less directly?
This tool’s contract is CSS. It does not resolve preprocessor variables or execute their functions. Compile your source with the appropriate software before preparing compact CSS.
Is accepted CSS compatible with every browser?
No. Readable syntax guarantees neither property support nor an effect in a particular DOM. Test target browsers and different interface states separately.
Related tools
Keep going with these tools
Tools similar or complementary to this one.
Similar tools
Format HTML or remove ordinary comments locally while retaining text whitespace and script content. No page execution or upload is required.
DevelopmentUse this tool
Format JavaScript, TypeScript or JSX for easier reading without executing code. Processing runs locally in your browser.
DevelopmentUse this tool
Encode or decode common HTML entities to convert special characters in text.
DevelopmentUse this tool
Read next
GuideConcepts and technologiesIntermediate
ISO week, Unix timestamp and dates in computing: understanding time representations
Understand ISO 8601 week numbers, Unix timestamps in seconds or milliseconds, and the difference between human-readable dates and technical time values.
28 August 20264 min