Minify CSS
A commented rule spread over five lines comes out as a single line of 24 characters. Spaces, comments, trailing semicolons and redundant zeros go, while the order of your rules stays untouched. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Minified CSS
- /* tema */ body { color: red; margin: 0; }
- Minified CSS
- body{color:red;margin:0}
A stylesheet written for a human to maintain and a stylesheet served to a browser have different jobs, and most projects still ship one file trying to do both.
One stylesheet for people, another for browsers
A stylesheet written for people to maintain and one served to a browser have different jobs, yet most projects still ship one file trying to do both. The readable version, with indentation, one selector per line and comments explaining an old browser fix, is exactly what a developer wants and exactly what a browser does not need. Keep that version in your project and minify only the copy that is actually served. It matters because stylesheets usually block the first paint: the page waits until they arrive, so every extra byte is time your visitors spend looking at a blank screen.
Smaller without changing how the page renders
Minification has to respect the cascade. Reordering or merging rules carelessly can change which declaration wins when two selectors conflict, because specificity and source order have decided that since the earliest versions of CSS. A conservative minifier removes only what is provably safe, such as whitespace, comments and redundant zeros and units, and leaves selector order and rule structure alone. It fits as a step in a release pipeline, or for sites built with static site generators, content management themes or design tools that sit outside a JavaScript build.
Safe compaction, not aggressive rewriting
CSS minification has to respect the cascade: reordering or merging rules carelessly can change which declaration wins when two selectors conflict, and CSS's specificity and source-order rules have been part of the spec since the language's earliest versions on the web. A conservative minifier removes what's provably safe to remove — whitespace, comments, redundant zeros and units — without touching selector order or rule structure, which is the difference between a smaller file and a stylesheet that renders a page differently than before.
What you can do with it
CI deploy pipeline
A CI pipeline minifies every CSS file changed in a release as a build step, keeping source files fully formatted for code review.
FAQ
Will minifying change how my page looks?
No, only whitespace, comments and provably redundant syntax are removed; selector order and specificity are preserved so rendering stays the same.
Does it support modern CSS features like custom properties?
Yes, custom properties, media queries and other standard modern CSS syntax pass through minification intact.
Is my CSS source stored after minification?
No, both the submitted and minified CSS are deleted after the retention window and never used for training.
Why does a smaller stylesheet make a page appear sooner?
Because browsers generally wait to draw a page until they have downloaded and read its stylesheets. Every unnecessary byte in that file delays the first paint, so a compact copy lets the page show up faster.
What exactly does minifying remove?
Only what is safe to drop: spaces and line breaks, comments, trailing semicolons, and redundant zeros and units. It never reorders selectors or merges rules, which is what keeps the cascade and the look of the page unchanged.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/data/css-minify \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"css":"a { color : red ; }"}'const res = await fetch("https://api.kit.forhosting.com/data/css-minify", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"css": "a { color : red ; }"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/data/css-minify",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"css": "a { color : red ; }"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/data/css-minify", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"css":"a { color : red ; }"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"css":"a { color : red ; }"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/data/css-minify", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"css": "a { color : red ; }"
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "data.css_minify",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Limits
max_mb | 25 |
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
This endpoint takes your readable CSS and returns the smallest equivalent, so the render-blocking request that loads it finishes faster.
Why stylesheet size still matters
CSS is render-blocking by default: a browser generally won't paint a page until it has downloaded and parsed the stylesheets that page depends on, which makes every unnecessary byte in that file a direct tax on time-to-first-paint. Source-formatted CSS — full of nested indentation, one selector per line, comments documenting a hack for an old browser — is exactly what a developer wants to read and exactly what a browser doesn't need. data.css_minify keeps the readable version in your source tree and only compacts the copy that actually gets served.
What the endpoint returns
Send POST /data/css-minify with the stylesheet source, and you get a task_id back while minification runs. The compacted CSS — whitespace collapsed, comments stripped, trailing semicolons and redundant units trimmed where it's safe to do so — arrives through a signed webhook call or waits behind a signed link valid for 24 hours.
Fitting into a build pipeline
Teams that don't want to install and maintain a bundler's CSS plugin, or that generate stylesheets outside a typical JavaScript build chain — from a static site generator, a CMS theme, or a design system exported by a non-JS tool — can call this endpoint as their minification step instead. Because pricing is per request with no charge on failed jobs, and the task runs async, a build script can fire off every stylesheet in a project in parallel and collect the results by webhook, treating minification as one predictable line in the deploy process rather than a dependency to keep patched and configured.
Integration use cases
Static site build without a JS bundler
A static site generator written outside the JavaScript ecosystem minifies its CSS output through the API instead of embedding a bundler-specific plugin.
CMS theme delivery
A content management system minifies theme stylesheets before serving them to visitors, cutting render-blocking payload size on every page load.
Design system export step
A design tool exports generated CSS and minifies it via the API before publishing the component library's stylesheet.
Technical questions
How do I minify CSS with the API?
POST your stylesheet to /data/css-minify, keep the returned task_id, and collect the minified CSS by webhook or a signed link valid for 24 hours.
Is the CSS minifier API free?
No, there is no free tier or trial; it costs $0.002 per request, and a failed request is never charged.
Can I use this instead of a bundler plugin?
Yes, it's built for exactly that: projects without a JavaScript build chain can call the endpoint directly as their minification step.
Can I minify many stylesheets in bulk?
Yes, submit one async task per file and collect each result by webhook, which fits a CI pipeline processing many files at once.
Is this endpoint live?
Yes, data.css_minify is live and accepting requests now.