CSS minifier: minify, format and inline CSS into HTML
Use this CSS minifier to shrink a stylesheet, format it for reading, or inline it into style attributes for email newsletters. Comments, whitespace and needless zeros disappear without changing the effect. Syntax errors name the line, and your code stays in the browser.
Source: W3C CSS Syntax Module Level 3 (Tokenisierung, Kommentare, Zeichenketten, At-Regeln). Updated: .
How it is calculated
This tool offers three things for stylesheets: minify for small files, format for readable code and inline for HTML email, where some programs ignore or trim style blocks.
Minify CSS
- Choose “Minify” and paste your CSS.
- Copy the result or download it as
style.min.css. Below you see how much smaller the file became.
Only transformations that do not change the effect are applied: comments (except /*! … */) and whitespace go, so does the last semicolon before }, 0.50em becomes .5em, #aabbcc becomes #abc and 0px becomes 0. Zeros with a unit stay where they are needed: in calc(), min(), max(), clamp(), in the flex shorthand, for time, angle and percentage values and in custom properties. Strings and url() are left unchanged.
Format CSS
Compressed CSS becomes readable code: one declaration per line, selector lists line by line, indented blocks and a blank line between rules. Comments are kept.
Inline CSS into HTML
Paste an HTML document with a style block. For every element the matching rules are evaluated, sorted by specificity and order, and written into the style attribute. An existing style attribute beats normal rules, and !important beats everything. What cannot be written into an element, such as :hover, pseudo-elements, @media and @font-face, stays in a style block.
Good to know
- HTML is normalised: when inlining, the browser reads the HTML and writes it out again. Tags appear in lowercase, attributes in quotes, and for tables it adds
<tbody>. Comments such as<!--[if mso]>are kept. - Not a substitute for testing: still check emails in the target programs. Some do not support certain CSS properties.
- Nested CSS: rules inside rules (CSS nesting) are kept when minifying and formatting but not resolved when inlining.
- Shorthands: the tool neither merges declarations nor expands shorthands. That is deliberate because it could change the effect.
Your code stays in your browser and is neither sent nor stored.
Frequently asked questions
How can I minify CSS?
Choose the “Minify” mode and paste the CSS. Comments, whitespace and needless zeros are removed, and the result can be copied or downloaded as a file.
Does minifying change how the page looks?
No, it only applies safe transformations. Zeros with a unit stay in calc() and the flex shorthand, for example, because they are needed there. Strings and url() are untouched.
What is CSS inlining for?
Some email programs ignore style blocks completely or partly. Inlining writes each rule into the element as a style attribute so the formatting arrives.
What happens to :hover and @media when inlining?
They cannot be written into an element and therefore stay in a style block in the head. Programs that support them still apply them.
How does the tool resolve conflicting rules?
By the CSS cascade: !important first, then higher specificity, and for a tie the later rule. An existing style attribute counts like a selector with the highest specificity.
Is my code uploaded?
No. Everything runs in your browser; the code is not sent, not stored and not written to the address bar.
Sources and legal basis
- W3C CSS Syntax Module Level 3 (Tokenisierung, Kommentare, Zeichenketten, At-Regeln)
- § 17: W3C Selectors Level 4 – Specificity (calculating specificity for the cascade)
- W3C CSS Cascading and Inheritance Level 4 (order by !important, origin, specificity)
- W3C CSS Values and Units Level 4 (zero without a unit, calc())
- W3C CSS Nesting Module (verschachtelte Regeln)
As of: · Editorial policy
Related tools
- JSON formatter, validator and minifierValidate JSON against RFC 8259 with the exact line, column and a plain-English explanation. Beautify or minify, sort keys, copy. Runs locally in your browser.
- SQL formatter (format SQL online)SQL formatter for readable queries: uppercase keywords, indentation, columns and conditions on separate lines. Also minifies SQL. Runs locally in your browser.
- htaccess redirect generator (301, HTTPS, www).htaccess redirect generator: 301 redirects, force HTTPS, www, domain moves and more. With a URL test run and the Nginx equivalent, local in your browser.
- CSS gradient generatorBuild CSS gradients: linear, radial or conic, as many color stops as you need, angle and fallback color – live preview and CSS ready to copy.
- Sitemap XML generator: build sitemap.xml from your URL listSitemap XML generator without signup: paste URLs, get a valid sitemap.xml per the Sitemaps protocol, check for errors and download it. Runs in your browser.
- What is my IP address?What is my IP? See your public IPv4 or IPv6 address at once, plus approximate location, internet provider and browser details. Free, never stored.
- HTML to Image ConverterHTML to image: paste your code, choose width and resolution and save a PNG, JPG or WebP – also transparent. Free, no upload, runs in your browser.
- JavaScript minifierJavaScript minifier: remove comments and whitespace, shrink the code and see the saving in bytes. In your browser, no upload.
- JWT decoder: read and verify a JSON Web TokenJWT decoder for header, payload and expiry (exp, iat, nbf). Verify the signature with a secret or public key. Everything runs locally in your browser.