Input CSS
Formatted / Minified CSS
Paste minified or badly indented CSS and get it back readable. The same box minifies in the other direction when you are done. Format keeps your comments; Minify removes them.
body{font-family:sans-serif;background:#fff}h1{color:#333;margin-bottom:20px}.card{padding:20px;border:1px solid #ddd}body {
font-family: sans-serif;
background: #fff
}
h1 {
color: #333;
margin-bottom: 20px
}
.card {
padding: 20px;
border: 1px solid #ddd
}Minified CSS is one long line. Indented, each rule and declaration sits on its own line, so you can find the rule that overrides yours.
Minify strips comments and whitespace, which is most of the weight in a hand-written stylesheet. It is a text pass, not a parser, so it also removes spaces around colons and commas inside quoted strings. For stylesheets with content strings, use the CSS minifier, which protects them.
const css = `
/* buttons */
.btn {
color: #fff;
background: blue;
}
@media (max-width: 600px) { .btn { display: block; } }
`;
// Minify: strip comments, collapse whitespace, drop the last semicolon in each block
const minified = css
.replace(/\/\*[\s\S]*?\*\//g, "")
.replace(/\s+/g, " ")
.replace(/\s*([{}:;,>])\s*/g, "$1")
.replace(/;}/g, "}")
.trim();
console.log(minified);
// .btn{color:#fff;background:blue}@media (max-width:600px){.btn{display:block}}
// Beautify with js-beautify (npm i js-beautify):
// const { css: beautify } = require("js-beautify");
// console.log(beautify(minified, { indent_size: 2 }));The regex minifier handles simple stylesheets and will eventually mangle a complex one. For production, use cssnano, lightningcss or esbuild, which parse strings and url() values properly.
# pip install cssbeautifier
import cssbeautifier
css = ".btn{color:#fff;background:blue}@media (max-width:600px){.btn{display:block}}"
opts = cssbeautifier.default_options()
opts.indent_size = 2
print(cssbeautifier.beautify(css, opts))
# From the shell: css-beautify --indent-size 2 style.min.csscssbeautifier is the Python port of js-beautify, so its output matches this tool.
<?php
$css = '.btn{color:#fff;background:blue}@media (max-width:600px){.btn{display:block}}';
// Minimal beautifier: one declaration per line, 2-space indent
function formatCss(string $css, string $indent = ' '): string {
$out = '';
$depth = 0;
for ($i = 0, $len = strlen($css); $i < $len; $i++) {
$c = $css[$i];
if ($c === '{') {
$out = rtrim($out) . " {\n" . str_repeat($indent, ++$depth);
} elseif ($c === '}') {
$out = rtrim($out) . "\n" . str_repeat($indent, --$depth) . "}\n" . str_repeat($indent, $depth);
} elseif ($c === ';') {
$out .= ";\n" . str_repeat($indent, $depth);
} elseif ($c === ':' && $depth > 0) {
$out .= ': ';
} else {
$out .= $c;
}
}
return trim($out) . "\n";
}
echo formatCss($css);
// Minify
echo preg_replace(['~/\*.*?\*/~s', '/\s*([{}:;,])\s*/', '/;}/'], ['', '$1', '}'], $css);This ignores edge cases such as colons inside url() or content strings. For a full implementation use sabberworm/php-css-parser.
Reformatting CSS cannot change how it behaves. The cascade depends on source order and specificity, not whitespace, and a formatter keeps rule order and never shuffles declarations. The beautified file and the minified file are the same stylesheet.
Dedicated minifiers do more than strip whitespace. cssnano and lightningcss shorten colors (#ffffff to #fff), merge duplicate selectors and drop the last semicolon in each block. The Minify button here removes comments and whitespace and drops that last semicolon, and nothing more.
This tool follows the specifications below. Read them when you need the exact normative wording, for example to settle an edge case between two implementations.
Yes. Use Minify to strip comments and whitespace, or Format to expand a minified file for editing. Minify here is a quick text pass that does not protect quoted strings; for production files, the CSS minifier is the safer choice.
Yes. Rules inside @media, @supports and @keyframes are indented one level deeper, and native CSS nesting is preserved.
No. Property order and selector order stay exactly as written; only spacing changes.
Yes. The dropdown offers 2 Spaces, 4 Spaces or Tab.
Plain CSS is the target. For SCSS, use the SCSS compiler, which outputs formatted CSS.
SCSS to CSS if the source is Sass, and Purge CSS when the file is large and you suspect most of it is unused. For markup, there is the HTML formatter.