DevConvertor
Code Formatters

CSS Formatter

Format CSS into readable, consistently indented rules — including nested rules, media queries, custom properties (variables), and calc() expressions — using Prettier's CSS parser.

Related tools

HTML Formatter

Beautify HTML, including embedded CSS and JavaScript.

CSS Minifier

Minify CSS while preserving its meaning.

PX ↔ REM Converter

Convert between px and rem with a configurable root font size.

Features

  • Formats nested rules, media queries, custom properties, and calc() expressions correctly
  • 2, 4-space, or tab indentation
  • Preserves comments

How to use

  1. Paste minified or messy CSS into the input.
  2. Pick an indentation size and click Format.
  3. Copy the result or download it as a file.

Example

Input

:root{--gap:8px}.a{margin:calc(1rem + var(--gap))}

Output

:root {
  --gap: 8px;
}
.a {
  margin: calc(1rem + var(--gap));
}