CSS Minifier & Formatter

How to Minify or Format CSS

1. Paste your CSS into the input field, or type it directly.
2. Select Minify to compress the CSS (remove all whitespace and comments), or Format to prettify and indent it.
3. Click the button to process.
4. Copy the output or download it as a .css file.

The tool handles any valid CSS including media queries, custom properties (CSS variables), keyframe animations, and nested selectors.

What CSS Minification Does

Minification reduces CSS file size by removing characters that are required for human readability but not for the browser to parse correctly. Pair with the HTML Formatter and Markdown to HTML converter for a complete front-end workflow:

• Whitespace removal — spaces, tabs, and newlines between selectors and declarations are removed.
• Comment stripping — /* comments */ are removed. They have no effect on rendering.
• Semicolon optimization — the final semicolon before a closing brace is optional and is removed.
• Zero value shortening — 0px becomes 0 (units are unnecessary on zero).
• Color shortening — #ffffff becomes #fff where applicable.

A typical CSS file is 20–40% smaller after minification. For large stylesheets, this reduces page load time and bandwidth.

CSS Formatting: When to Use Beautify

The formatter does the opposite of minification — it takes compact or minified CSS and adds consistent indentation, newlines, and spacing to make it readable. Common uses:

• Reading third-party CSS from a minified production bundle.
• Debugging CSS from browser DevTools that was copy-pasted out as a single line.
• Standardizing CSS from multiple contributors with inconsistent formatting.
• Reviewing what a CSS framework actually contains after downloading a CDN version.

Production Workflow: How Minification Fits In

In a modern web project, CSS minification is typically handled automatically by your build tool:

• Vite / Rollup — minifies CSS automatically in production builds (vite build).
• Webpack — use css-minimizer-webpack-plugin.
• PostCSS + cssnano — the most flexible pipeline; cssnano applies dozens of micro-optimizations.
• Gulp / Grunt — use gulp-clean-css or grunt-contrib-cssmin.

Use this tool for one-off minification, when you are not using a build pipeline, or when you need to quickly inspect or debug production CSS.

CSS and Front-End Workflow

CSS minification is part of a front-end optimization workflow:

• Format and beautify HTML alongside your CSS
• Convert color values between HEX, RGB, and HSL before adding them to CSS
• Generate CSS gradients visually and paste the code into your stylesheet
• Base64-encode images for embedding directly in CSS as data URIs

Related Tools

• Tracking CSS file size improvements in a spreadsheet? Convert to JSON for programmatic processing. → convert CSS benchmark data from CSV
• Analyzing CSS metrics across files? Export the data as CSV for spreadsheet comparison. → export CSS analysis data to a spreadsheet
• Embedding CSS data URIs? URL-encode the content to ensure it is safe for the stylesheet. → URL-encode CSS data URIs
• Migrating CSS minification code from VB.NET? Translate it to C# in one step. → convert VB.NET CSS processing code to C#