Will formatting change my styles?

No. Only whitespace and line breaks change. Values, strings, url() and data URLs, custom properties and comments stay exactly as they are.

Can it unminify CSS from a production site?

Yes. Paste the minified stylesheet and every rule, declaration and @media block is put on its own line with consistent indentation.

Does it work with SCSS or Less?

Plain CSS is the target. Simple SCSS and Less usually format fine, but their special syntax (mixins, maps, nested properties) isn't understood and may be laid out unusually.

CSS Formatter & Beautifier

Turn minified or messy CSS into clean, readable, consistently indented code.

CSS input

:root{--brand:#2563eb;--radius:.5rem;--font:"Inter",system-ui,sans-serif}*,:before,:after{box-sizing:border-box}body{margin:0;font-family:var(--font);color:#1f2937}.btn{display:inline-flex;gap:.5rem;padding:.625rem 1rem;border-radius:var(--radius);background:var(--brand);color:#fff;width:calc(100% - 2 * var(--radius))}.btn:hover,.btn:focus-visible{background:color-mix(in srgb,var(--brand) 85%,#000)}.icon{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'/>") no-repeat}.note:before{content:"→ Hinweis: "}@media (max-width:640px){.btn{width:100%}}@supports (display:grid){.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}}@keyframes fade{from{opacity:0}to{opacity:1}}

Formatted CSS

:root {
  --brand: #2563eb;
  --radius: .5rem;
  --font: "Inter", system-ui, sans-serif
}

*,
:before,
:after {
  box-sizing: border-box
}

body {
  margin: 0;
  font-family: var(--font);
  color: #1f2937
}

.btn {
  display: inline-flex;
  gap: .5rem;
  padding: .625rem 1rem;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  width: calc(100% - 2 * var(--radius))
}

.btn:hover,
.btn:focus-visible {
  background: color-mix(in srgb, var(--brand) 85%, #000)
}

.icon {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'/>") no-repeat
}

.note:before {
  content: "→ Hinweis: "
}

@media (max-width:640px) {
  .btn {
    width: 100%
  }
}

@supports (display:grid) {
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))
  }
}

@keyframes fade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

:root {
  --brand: #2563eb;
  --radius: .5rem;
  --font: "Inter", system-ui, sans-serif
}

*,
:before,
:after {
  box-sizing: border-box
}

body {
  margin: 0;
  font-family: var(--font);
  color: #1f2937
}

.btn {
  display: inline-flex;
  gap: .5rem;
  padding: .625rem 1rem;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  width: calc(100% - 2 * var(--radius))
}

.btn:hover,
.btn:focus-visible {
  background: color-mix(in srgb, var(--brand) 85%, #000)
}

.icon {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'/>") no-repeat
}

.note:before {
  content: "→ Hinweis: "
}

@media (max-width:640px) {
  .btn {
    width: 100%
  }
}

@supports (display:grid) {
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))
  }
}

@keyframes fade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

How to format CSS

Paste compressed or messy CSS on the left, or open a .css file.
The formatted stylesheet appears on the right as you type.
Choose 2 spaces, 4 spaces or tabs.
Copy the result or download it as a .css file.

Before and after

Minified CSS

.nav{display:flex;gap:1rem}.nav a{color:var(--link,#2563eb)}@media (max-width:600px){.nav{flex-direction:column}}

Formatted

.nav {
  display: flex;
  gap: 1rem
}

.nav a {
  color: var(--link, #2563eb)
}

@media (max-width:600px) {
  .nav {
    flex-direction: column
  }
}

What stays exactly as it was

Formatting only changes whitespace and line breaks. The formatter (js-beautify) keeps strings and content values, url() and data URLs, calc() expressions, custom properties and var(), comments, and at-rules such as @media, @supports and @keyframes. Unclosed strings, comments or brackets are reported with their line and column, because formatting broken CSS would only hide the problem.

Use cases

Reading the minified stylesheet of a website or a UI library.
Cleaning up CSS copied from the browser's dev tools or an email template.
Giving a stylesheet consistent indentation before a code review.

Related tools

Compress stylesheets for production with the CSS minifier. Formatting JavaScript or markup too? Use the JavaScript formatter and the HTML formatter, and try your styles live in the online HTML editor.

Frequently asked questions

Will formatting change my styles?: No. Only whitespace and line breaks change. Values, strings, url() and data URLs, custom properties and comments stay exactly as they are.
Can it unminify CSS from a production site?: Yes. Paste the minified stylesheet and every rule, declaration and @media block is put on its own line with consistent indentation.
Does it work with SCSS or Less?: Plain CSS is the target. Simple SCSS and Less usually format fine, but their special syntax (mixins, maps, nested properties) isn't understood and may be laid out unusually.