CSS Formatter & Minifier

CSS Formatting Guide

CSS minification (also called compressing or shrinking CSS) removes whitespace, comments, and redundant characters from a stylesheet to reduce its file size without changing how it renders. CSS formatting - also known as beautifying or using a CSS prettifier - does the opposite: it adds consistent indentation and line breaks so the same stylesheet is easy to read and edit.

Why Format or Minify CSS?

CSS you copy from a build tool, browser dev tools, or a teammate is often either inconsistently indented and hard to scan, or already minified into a single line that's impossible to edit. This tool solves both problems in one place:

• Beautify for readability: Re-indent rules, declarations, and nested at-rules with a consistent indent size so you can review and edit stylesheets easily.
• Minify for production: Strip whitespace and comments to reduce file size before shipping a stylesheet.
• Safe with strings and URLs: Quoted string values and url() paths are left untouched during minification, so fonts, background images, and content values keep working.
• One-click copy: Copy the formatted or minified result straight into your editor.
• Zero install: Works entirely in your browser - no extensions, plugins, or sign-up required.

CSS Formatter & Minifier in Action

Here's a quick example of the same CSS rule before and after running it through this tool:

.btn{display:inline-flex;align-items:center;padding:8px 16px;border-radius:6px;background:#4ADE80}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 6px;
  background: #4ADE80;
}

Formatting vs. Minifying

Formatting and minifying are opposite operations on the same stylesheet - one optimizes for humans, the other for file size.

Common Use Cases for CSS Formatting & Minification

Pretty printing and compressing CSS solve different everyday problems. Here's when each one comes in handy:

• Cleaning up copy-pasted styles: CSS copied from browser dev tools, a CMS, or a third-party snippet is often a single unreadable line. Pretty print it to review and adapt the rules before reusing them.
• Reviewing generated stylesheets: Format CSS output from a preprocessor or framework to check what's actually being shipped, then minify the final build output.
• Debugging third-party stylesheets: Minified CSS from a competitor's site, a CDN bundle, or an embedded widget is hard to read - beautify it first to inspect selectors and values.
• Shrinking static stylesheets for performance: Compress hand-written CSS for a static site or landing page to cut payload size and improve load times.

What Gets Stripped When Minifying

• Whitespace between rules: line breaks and indentation between selectors, declarations, and blocks are removed.
• Spaces around punctuation: spaces around {, }, :, ;, and , are removed.
• Trailing semicolons: the last semicolon before a closing } is removed since it's redundant.
• CSS comments:/* ... */ blocks are removed when "Strip comments" is enabled - except license/banner comments that start with /*!, which are preserved.

How to Use This Tool

• Paste your CSS - or click "Load sample" to try it with example styles.
• Choose an indent size - 2 spaces, 4 spaces, or tabs for the formatted output.
• Click Format or Minify - the result appears in the output box, with character counts for both versions.
• Copy the result - click Copy to place it on your clipboard.

CSS Formatting Best Practices

• Pick one indent size and stick to it: 2 spaces is the de-facto standard for CSS, but whatever you choose, keep it consistent across your project so diffs stay clean.
• Format source, minify output: Keep your source stylesheets formatted for readability, and only minify the build output you actually ship.
• Keep license banners when minifying: Use /*! ... */ for copyright or license notices you need to keep in a minified file - this tool preserves them when "Strip comments" is enabled.
• Re-check after minifying: Always render or preview minified CSS before deploying - while this tool never touches selectors, properties, or values, it's good practice to confirm the page still looks right.
• Don't minify during development: Minified stylesheets are hard to debug in browser dev tools. Format for local development and minify only as a build step.

Frequently Asked Questions