CSS Formatter

Free

Beautify and format CSS stylesheets with color previews, sorting and syntax highlighting.

Valid CSS

6 rules6 selectors29 properties611 bytes

Input611 chars

Formatted722 chars

.container {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:1rem 2rem;
  margin:0 auto;
  max-width:1200px;
  background-color:#ffffff;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1)
}

.header {
  font-size:2rem;
  font-weight:700;
  color:#1a1a1a;
  margin-bottom:1.5rem
}

.button {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.75rem 1.5rem;
  background-color:#3b82f6;
  color:#ffffff;
  border:none;
  border-radius:6px;
  cursor:pointer;
  transition:background-color 0.2s ease
}

.button:hover {
  background-color:#2563eb
}

@media(max-width:768px) {
  .container {
    flex-direction:column;
    padding:1rem
  }

}

About CSS Formatter

Format minified or messy CSS into clean, readable stylesheets. Inline color swatches show hex and rgba colors visually. Sort properties alphabetically for consistency. Detects missing semicolons and mismatched braces. Works with plain CSS and minified output from build tools.

CSS Formatter

Reviews