Ctrl + K
Developer

CSS Minifier / Beautifier

Minify CSS to reduce file size or beautify compressed stylesheets into clean, readable code with syntax highlighting. Format, compress, and optimize CSS instantly.

Input 37 lines · 608 chars
Formatted 1 lines · 0 chars
/* Main Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Inter');

:root {
  --primary: #3b82f6;
  --spacing: 1rem;
}
body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  background: var(--primary);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing);
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn: hover  opacity 0.9;
}
@media (max-width: 768px) {
  .container { padding: 0.5rem; }
}

All CSS processing runs entirely in your browser. Your code is never sent to any server, cached, or stored.

CSS stylesheets are the visual backbone of every website, but they quickly become bloated with redundant whitespace, comments, and verbose formatting during development. Our free online CSS Minifier and Beautifier handles both sides of the workflow: compress production stylesheets to shave precious kilobytes off page loads, and beautify minified or messy CSS into clean, properly indented, syntax-highlighted code for editing and debugging. Every keystroke is instantly tokenized, formatted, and colorized — selectors, properties, values, comments, and at-rules each receive distinct coloring so you can parse rule structure at a glance. All processing happens locally in your browser with zero server interaction.

How to Use the CSS Formatter

  1. Paste or type your CSS — Enter raw CSS into the input panel. The tool accepts everything from single rules to full stylesheets with @import, @media, @keyframes, and custom properties.
  2. Choose Beautify or Minify — Click Beautify for clean, indented code with syntax highlighting for editing, or Minify to compress CSS into the smallest possible single line for production deployment.
  3. Read the color-coded output — Selectors render in orange, properties in cyan, values in green, comments in gray italics, and at-rules in magenta — making rule structure immediately visible without scrolling through raw text.
  4. Copy or download — Use Copy to grab the output to your clipboard, or Download to save as a .css file ready for your project.

Key Features

  • Syntax Highlighting

    Selectors, properties, values, comments, at-rules, and punctuation each get distinct colors for instant visual parsing.

  • Proper Indentation

    Properties are indented within rule blocks with 2-space tabs. Nested at-rules and selectors are handled correctly.

  • Beautify & Minify

    One-click toggle between readable, indented CSS for development and fully compressed output for production.

  • At-Rule Support

    Correctly handles @import, @media, @keyframes, @font-face, @supports, and custom property definitions with proper nesting.

  • Real-Time Processing

    No submit button needed. Every keystroke re-tokenizes and reformats the output with zero latency.

  • 100% Client-Side

    All formatting runs in your browser. No uploads, no server processing — your stylesheets stay private.

When to Use a CSS Minifier & Beautifier

  • Production Deployment: Minify your stylesheets before pushing to production. Removing whitespace and comments can reduce CSS file size by 20–40%, directly improving page load times and Core Web Vitals scores.
  • Debugging Frameworks: When you need to inspect Bootstrap, Tailwind, or third-party library CSS, beautify the minified distribution file into readable, indented code for analysis.
  • Code Review: Standardize inconsistent formatting from multiple contributors before code review. Consistent indentation makes PRs cleaner and changes easier to track.
  • Legacy Projects: Clean up old, inconsistently formatted stylesheets accumulated over years of development. Beautify to understand the structure before refactoring.
  • Bundle Analysis: After using CSS-in-JS or CSS modules, minify the compiled output to see exactly what ships to the client and identify bloat.

Frequently Asked Questions

How much file size reduction can I expect from minification?
CSS minification typically reduces file size by 20–40% depending on how much whitespace and comments your original stylesheet contains. Heavily commented, deeply indented files see the largest reductions. Combined with gzip or Brotli compression at the HTTP level, total transfer size reductions often exceed 70%. For maximum optimization, use minification alongside modern techniques like unused CSS removal and critical CSS extraction.
Does minification change how my CSS works?
No. Proper CSS minification only removes non-functional characters — whitespace, comments, trailing semicolons, and unnecessary units (e.g., stripping the unit from zero values like 0px). It preserves all selectors, property-value pairs, and at-rules exactly as written. The beautify step reconstructs readable formatting from minified output by re-tokenizing the raw CSS. Both transformations are purely cosmetic and never alter the semantics of your stylesheet.
Can I beautify CSS that was minified by another tool?
Yes. Paste any minified CSS — regardless of which tool compressed it — and our beautifier will reconstruct clean, properly indented, syntax-highlighted code. The tokenizer works at the character level and does not rely on any particular formatting conventions.
Does this tool support CSS preprocessors like SCSS or Less?
This tool is designed for plain CSS. While it will format basic SCSS/Less syntax (nesting, variables, mixins) as text, preprocessor-specific features may not receive optimal indentation or syntax highlighting. For full preprocessor formatting, consider a dedicated SCSS/Less formatter.
Is my CSS code safe and private?
Absolutely. All tokenization, formatting, and highlighting runs entirely in your browser. Your CSS never leaves your device — no uploads, no server-side processing, no logging. You can disconnect from the internet and the tool continues working without interruption.

Related Tools

HTML Formatter / Beautifier

Format HTML with syntax highlighting and proper indentation for tags and attributes.
JavaScript Minifier / Beautifier

Minify JS to optimize load times or beautify compressed scripts for debugging.
JSON Formatter

Format, validate, and minify JSON data with real-time syntax error detection.
CSS Generator

Generate CSS effects like gradients, shadows, filters, and transforms visually.