CSS Formatter & Beautifier

What does the CSS Formatter & Beautifier do?

The CSS Formatter & Beautifier parses minified, compressed, or unindented CSS stylesheets and formats them into clean, structured rules. It aligns selector rule braces ({ ... }), formats property declarations onto individual indented lines, inserts spacing after property colons, and provides customizable indentation (2 spaces, 4 spaces, or tabs).

Core Concepts

Understanding CSS stylesheet formatting mechanics:

• Brace & Rule Alignment: Places opening braces on selector lines and moves closing braces onto their own dedicated lines with balanced indentation.
• Property Colon Spacing: Normalizes CSS property declarations by inserting standard spacing after colons (e.g. color: #ffffff;).
• Configurable Indentation: Supports 2-space, 4-space, or tab indentation hierarchies for nested CSS rules and media queries.
• Quote String Protection: Preserves string literals (such as content: "..." or font names) from inappropriate line breaks or modifications.

How to use the tool?

1. Enter CSS Code: Paste your minified or unindented CSS stylesheet code into the editor or click Load Sample.
2. Select Indentation: Choose your preferred indentation spacing (2 spaces, 4 spaces, or tabs).
3. Format & Copy: Click Format CSS Code, then click Copy or Download to export the beautified stylesheet.

Related Developer Utilities

If you work with CSS stylesheets, web design, and markup formatting, explore these complementary tools:

• CSS Minifier: Minify and compress CSS stylesheets to reduce file size.
• CSS Unit Converter: Convert px to rem, em, %, and viewport units.
• HTML Formatter & Beautifier: Format and beautify HTML documents.
• JSON Formatter: Format and validate structured JSON documents.

REST API Integration

Blueutils provides a free REST API endpoint (POST https://blueutils.com/api/css/css-formatter) to programmatically format unindented or minified CSS stylesheets, align properties, and beautify rule blocks.

API Request Parameters

API Request Payload Examples

cURL

curl -X POST https://blueutils.com/api/css/css-formatter \
  -H "Content-Type: application/json" \
  -d '{
    "rawText": ".container{width:100%;margin:0 auto}.card{background:#fff;padding:16px}",
    "options": { "indent": 2 }
  }'

Python

import requests

url = "https://blueutils.com/api/css/css-formatter"
payload = {
    "rawText": ".container{width:100%;margin:0 auto}.card{background:#fff;padding:16px}",
    "options": {"indent": 2}
}
headers = {"Content-Type": "application/json"}
response = requests.post(url, json=payload, headers=headers)
print(response.json())

Java

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

public class Main {
    public static void main(String[] args) throws Exception {
        String jsonPayload = """
            {
                "rawText": ".container{width:100%;margin:0 auto}.card{background:#fff;padding:16px}",
                "options": { "indent": 2 }
            }
            """;

        HttpClient client = HttpClient.newHttpClient();
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://blueutils.com/api/css/css-formatter"))
            .header("Content-Type", "application/json")
            .POST(HttpRequest.BodyPublishers.ofString(jsonPayload))
            .build();

        HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
        System.out.println(response.body());
    }
}

API Response Parameters

API Response Payload Examples

Success Response (HTTP 200 OK)

{
  "isValid": true,
  "formattedCss": ".container {\n  width: 100%;\n  margin: 0 auto;\n}\n\n.card {\n  background: #fff;\n  padding: 16px;\n}",
  "result": ".container {\n  width: 100%;\n  margin: 0 auto;\n}\n\n.card {\n  background: #fff;\n  padding: 16px;\n}"
}

Validation Failure Response (HTTP 400 Bad Request)

{
  "isValid": false,
  "error": "Invalid input: CSS payload to format cannot be empty."
}

Rate Limit Exceeded Response (HTTP 429 Too Many Requests)

{
  "error": "API rate limit exceeded. Please wait or contact support@blueutils.com."
}

Why use an API to format CSS?

Integrating the CSS Formatter API into automated build systems, code linters, or AI agent tool calling provides key benefits:

• Rapid Script Validation: Formats dynamically generated or extracted stylesheet strings before committing to code repositories.
• Optimized Token Efficiency for AI Agents: LLMs frequently introduce erratic spacing when editing stylesheets. Calling the API reformats rules deterministically without token consumption.
• Deterministic Accuracy Without Hallucinations: Ensures 100% compliant property alignment and clean brace indentation.

Native Usage

How to format CSS stylesheets locally in terminal environments or scripts:

Windows (CMD / PowerShell)

# Format CSS in PowerShell
(Get-Content -Path .\style.min.css -Raw) -replace '\{', " {`n  " -replace ';', ";`n  " -replace '\}', "`n}`n" | Set-Content style.css

Linux / Unix (Bash)

# Format CSS using sed in Linux
sed -E 's/\{/ {\n  /g; s/;/;\n  /g; s/\}/ \n\}\n/g' style.min.css > style.css

Python

Using Python re:

import re

css = ".container{width:100%;margin:0 auto}.card{background:#fff;padding:16px}"
formatted = re.sub(r'\{', ' {\n  ', css)
formatted = re.sub(r';', ';\n  ', formatted)
formatted = re.sub(r'\}', '\n}\n\n', formatted)
print(formatted)

Java

Using Java String.replace:

import java.nio.file.*;

public class CssFormatterExample {
    public static void main(String[] args) throws Exception {
        String css = Files.readString(Paths.get("style.min.css"));
        String formatted = css
            .replace("{", " {\n  ")
            .replace(";", ";\n  ")
            .replace("}", "\n}\n\n");
        Files.writeString(Paths.get("style.css"), formatted);
        System.out.println("CSS formatted successfully.");
    }
}