CSS Formatter

Beautify or minify CSS code instantly in your browser. Supports at-rules, custom properties, url() values, and licence comment preservation.

css format beautify minify
Free Client-Side Private
🔒 This tool runs entirely in your browser — your files are never uploaded to any server.

The CSS Formatter & Minifier is a free, browser-based tool that instantly beautifies or compresses any CSS stylesheet. No files are uploaded to a server — all processing happens entirely in your browser using JavaScript.

Features

Feature Detail
Beautify Adds proper indentation and consistent spacing to minified or messy CSS
Minify Removes comments and collapses whitespace to produce the smallest possible file
Indent options Choose 2 spaces, 4 spaces, or tabs
Load from file Drag-and-drop or click to upload any .css file
Preserves /*! comments Licence and important comments are kept intact during minification
Smart parser Handles strings, url() values, and at-rules without corrupting values
Stats Shows block count, declaration count, line count, and file size
Copy & Download One-click copy to clipboard or save as .css or .min.css

How to Use

  1. Paste your CSS into the input area, or click Load file to upload a .css file. You can also drag-and-drop a file directly onto the text area.
  2. Select an Output mode: Beautify to add formatting, or Minify to compress.
  3. Choose your preferred Indent style (active in Beautify mode only — 2 spaces, 4 spaces, or tab).
  4. Click Beautify CSS or Minify CSS.
  5. Review the output, then click Copy to copy to the clipboard, or Download to save the file.

Beautify vs Minify

When to Beautify

Use Beautify mode when you need to read, debug, or edit CSS that has been compressed, auto-generated by a build tool, or minified for production. Reformatting makes it easy to scan selectors, spot duplicate properties, and understand the cascade.

When to Minify

Use Minify mode before deploying to production. Smaller CSS files download faster, reducing render-blocking time and improving Core Web Vitals scores such as LCP and FID. Minification typically reduces CSS file size by 20–40%.

What the Parser Handles Correctly

  • String values are never altered — content: "a: b;" is preserved exactly as written.
  • url() functions with unquoted URLs (including those containing : and ; such as url(data:image/png;base64,...)) are parsed without corrupting the value.
  • At-rules — @import, @charset, @media, @keyframes, @supports, @layer, @font-face, and more — are fully supported.
  • CSS custom properties (--variable: value) are indented and formatted like regular declarations.
  • /*! licence comments (e.g. Bootstrap, normalize.css) are preserved even in Minify mode.
  • Nested at-rules such as @media { .selector { ... } } are indented correctly at every level.

Frequently Asked Questions

Does this tool support SCSS or Less?

No — this tool processes plain CSS only. SCSS and Less syntax requires a dedicated preprocessor such as sass or the Less compiler.

Are my stylesheets uploaded anywhere?

Never. All formatting runs locally in your browser with JavaScript. Nothing is sent to any server, so you can safely paste private or proprietary stylesheets.

Will minified CSS work in all browsers?

Yes. CSS minification only removes whitespace and comments — it does not modify any selectors, properties, or values that affect rendering.

Why should I minify CSS?

Minified CSS reduces file size, which means faster downloads, lower bandwidth usage, and better scores in Google PageSpeed Insights and Lighthouse audits.

Can I use this tool for large stylesheets?

Yes. The formatter runs entirely in your browser and is not limited by file upload sizes. Performance depends only on your device.

What does the Blocks stat mean?

Blocks counts the number of {...} rule blocks in the stylesheet, including both selector rules and at-rules such as @media and @keyframes.

Report an issue