✨ CSS Beautifier - Format and pretty-print CSS code

✨
Characters: {{ cssInput.length }}
📏
⚙️
⚡
📤
{{ result.beautified }}
Characters: {{ result.beautifiedSize }}
📊
Original Size:
{{ result.originalSize.toLocaleString() }} chars
Formatted Size:
{{ result.beautifiedSize.toLocaleString() }} chars
Size Change:
{{ result.sizeChange > 0 ?'+' :'' }}{{ result.sizeChange.toLocaleString() }} chars
Change %:
{{ result.changePercentage > 0 ?'+' :'' }}{{ result.changePercentage }}%
💾
Original: ~{{ Math.round(result.originalSize / 1024 * 100) / 100 }} KB
Formatted: ~{{ Math.round(result.beautifiedSize / 1024 * 100) / 100 }} KB
{{ result.sizeChange >= 0 ?'Size Increase:' :'Size Reduction:' }} ~{{ Math.abs(Math.round((result.beautifiedSize - result.originalSize) / 1024 * 100) / 100) }} KB
💾
⚠️ {{ error }}

ℹ️ About CSS Beautifier

CSS Beautification formats compact, minified, or inconsistent CSS into a readable stylesheet layout. It adds predictable indentation, line breaks, brace spacing, colon spacing, and optional comment preservation around common CSS rules and declaration blocks.

CSS source is built from rules, at-rules, selectors, declarations, and values. The W3C CSS Syntax Module Level 3 defines how stylesheet text is tokenized and parsed, including comments, at-rules, qualified rules, declarations, and error handling. This tool focuses on whitespace and layout so copied or generated CSS is easier to inspect.

Common uses:

  • Expand minified CSS from production bundles, browser DevTools, CMS themes, or third-party widgets.
  • Normalize indentation before reviewing selectors, media queries, custom properties, and declaration blocks.
  • Make copied <style> blocks readable before moving them into a project stylesheet.
  • Preserve or remove block comments when preparing CSS snippets for debugging or documentation.

Formatting controls:

  • Choose spaces or tabs, with selectable space width for indented declarations.
  • Control line breaks before rules, after opening braces, and before properties.
  • Toggle spaces after colons and before opening braces.
  • Keep block comments such as /* layout */ or strip them from the output.
  • Add a final newline for editor- and version-control-friendly output.

Example:

  • Input: body{margin:0;color:#222}.card{padding:1rem}
  • Output: selectors are split onto separate blocks and declarations are placed on their own indented lines.

Modern CSS may include custom properties and native nesting. Use the W3C CSS Custom Properties and CSS Nesting specifications when you need to confirm syntax details. This beautifier does not compile SCSS/Sass, minify output, lint property names, or verify browser support; review the result manually when formatting malformed CSS, vendor hacks, or unusual generated code.

API Usage Example:

POST /api/tools/webdev/css-beautifier
Content-Type: application/json

{
    "css": "body{color:red;margin:0}",
    "indentSize": 2,
    "indentType": "spaces",
    "newlineBeforeRule": true,
    "newlineAfterRule": true,
    "newlineBeforeProperty": true,
    "spaceAfterColon": true,
    "spaceBeforeBrace": true,
    "preserveComments": true,
    "insertFinalNewline": true
}
Ready