CSS Minifier
{{ summaryHeadline }}
{{ summaryDetail }}
Disabled draft {{ formatBytes(metrics.inputBytes) }} input {{ formatBytes(metrics.outputBytes) }} output {{ parserBadgeLabel }}
Paste one stylesheet, or browse/drop a CSS or TXT file. Output updates automatically.
{{ sourceHint }}
Choose whether protected comments survive the minified output.
{{ minifiedCss || 'No CSS output yet.' }}
Metric Value Detail Copy
{{ row.metric }} {{ row.value }} {{ row.detail }}
Check Status Detail Copy
{{ row.check }} {{ row.status }} {{ row.detail }} 

          

        

      


    

  

                

                

                    

                        

                            Tags: Devtools, Text
                        

                        

                            Export to PDF
                            Fullscreen
                        

                    

                

            

        

    


                    
        

        

        

            

            
        

        


                                                                                                                                                                                                                                                        
        

        

            
            

                Customize

                

                    

                        

                            
                            
                        


                        

                            
                            
                        


                        

                            
                            
                        

                    


                    

                        Advanced

                        

                            

                                
                                

                                    
                                    
                                

                            


                            

                                
                                

                                    
                                    
                                

                            


                            

                                
                                

                                    
                                    :
                                    
                                

                            


                            

                                
                                

                                    
                                    
                                

                            


                            

                                

                                    
                                    
                                

                            


                            

                                

                                    
                                    
                                

                            


                            

                                
                                
                            


                            

                                
                                
                            

                        

                    

                

            

            
        


        

            
            
            
        


        
        

    

    

        

  
  
CSS minification trims a stylesheet so the browser receives the same rules with less formatting overhead. Comments, indentation, line breaks, and spacing that only help humans read the file can often be removed before a production handoff, while selectors, declarations, strings, custom properties, and at-rules still need to mean the same thing after the text is compressed.

  

    Flow from readable CSS through safe trimming to compact CSS with metrics and audit checks
  

  
The useful goal is conservative compression, not clever rewriting. A stylesheet can depend on small pieces of syntax such as quoted font names, spaces around a minus sign in calc(), or the position of an @media block. A safe pass removes formatting only where the next token still parses the same way.

  
Compression numbers need context. A smaller file can still contain a broken selector, an unmatched brace, or an @import that points to another stylesheet that has not been checked. The best handoff combines the compact output with a quick audit of parser status, brace balance, comment handling, and modern CSS cues.






  
Technical Details:

  
CSS is parsed as rules, declarations, blocks, functions, strings, and at-rules. Comments are not part of the parsed rule structure, and whitespace is often flexible, but whitespace is not always disposable. Removing the wrong gap can join two tokens into a different identifier or change a mathematical expression into invalid CSS.

  
The minification path removes block comments outside quoted strings, collapses formatting whitespace, strips spaces around punctuation where that is safe, and removes the final semicolon before a closing brace. It does not rename selectors, merge declarations, remove unused rules, resolve imports, add vendor prefixes, reorder fallbacks, or evaluate CSS variables.

  
The percentage shown in the metrics is byte-based. If the compacted output is not smaller, the headline reports that the CSS is already compact rather than treating a negative saving as a useful improvement.

  

    
      
        Reduction
        =
        
          
            Input bytes
            -
            Output bytes
          
          Input bytes
        
        ×
        100
      
    
  

  

    

      
      
        

          Pass
          What changes
          What stays protected
        

      
      
        

          Comment handling
          Normal block comments are removed. /*! ... */ comments are kept when the preserve-important policy is selected.
          Text inside quoted strings is not treated as a comment, even when it contains slash or asterisk characters.
        

        

          Whitespace collapse
          Indentation, line breaks, and redundant spaces are collapsed into the shortest safe gap.
          Spaces that keep adjacent tokens apart, such as function calls or plus/minus expressions, remain when needed.
        

        

          Punctuation cleanup
          Spaces around braces, colons, semicolons, commas, combinators, and closing brackets are trimmed where parsing stays stable.
          Selector text, declaration values, quoted font names, custom property names, and URL text are not rewritten.
        

        

          Structural scan
          Brace balance, string closure, comment closure, at-rules, custom properties, CSS math functions, URL values, and imports are counted.
          The scan reports cues and warnings; it does not fetch external stylesheets or prove visual rendering.
        

      
    

  

  

    

      
      
        

          Audit check
          Status cue
          How to read it
        

      
      
        

          Browser parser
          Passed, Review, or Waiting
          A parser pass means the compact CSS produced at least one parsed rule in a supporting browser. A review status means the source needs inspection before release.
        

        

          Brace structure
          Balanced or Review
          A nonzero balance means opening and closing braces do not match. Minification can still produce text, but the CSS may not apply as intended.
        

        

          String/comment closure
          Closed or Review
          Unclosed strings and unterminated comments can swallow later CSS. Fix the source before copying the compact result.
        

        

          At-rule coverage
          Ready or Review
          @import statements remain in the output, but imported files are not fetched during the local parser check.
        

      
    

  






  
Everyday Use & Decision Guide:

  
Start with a stylesheet that already works in the browser or build tool you use for the site. Paste CSS directly, drop text onto the source box, or load a .css or .txt file under the 2 MB browser-side limit. The source status should show a line count and byte size before you trust the output.

  
Keep Preserve /*! important comments selected when copyright, license, or attribution comments must ship with the minified file. Use Strip all comments only when those obligations have already been handled elsewhere and the smallest output matters more than retaining protected notices.

  
    
    
  • Use Compressed CSS for the final compact stylesheet text.
    • 
    
  • Use Compression Metrics to compare input size, output size, bytes saved, comments removed, and longest output line.
    • 
    
  • Use Minifier Audit when a warning appears or when the CSS includes @import, custom properties, calc(), clamp(), or URL values.
    • 
    
  • Use JSON when the result needs to carry parameters, metrics, warnings, audit rows, and compact CSS together.
    • 
  

  
A parser pass does not mean the page will look correct. The check does not compare screenshots, load imported files, test every browser version, or confirm that a later fallback should override an earlier declaration. After copying the result, test the compact file in the page or build path that will actually ship it.






  
Step-by-Step Guide:

  
Use the main source box and the result tabs together so the compact CSS and its checks stay in view.

  
    
    
  1. Paste CSS into CSS source, choose Browse CSS, or drop one CSS/TXT file onto the textarea. The source hint should report non-empty lines and byte size, or show a file-type, file-size, or empty-source warning.
    2. 
    
  2. Choose Comment handling. Preserve important comments for /*! ... */ notices; choose strip-all only when removing every comment is acceptable.
    3. 
    
  3. Read the summary box. Paste CSS means there is no source yet, Already compact means no byte savings were found, and a percent headline means the output is smaller.
    4. 
    
  4. Open Compressed CSS and scan the compact text before using Copy CSS or Download CSS. Look for obviously joined selectors, missing quotes, or unexpected comment retention.
    5. 
    
  5. Open Compression Metrics and confirm Input size, Output size, Bytes saved, and Comments removed match the work you expected the minifier to do.
    6. 
    
  6. Open Minifier Audit if any warning appears. Fix brace, string, comment, or parser review issues in the source box, then let the output refresh before copying again.
    7. 
    
  7. Use JSON only when you need the compact CSS together with parameters, metrics, parser status, warnings, and audit rows for a handoff or later review.
    8. 
  






  
Interpreting Results:

  
The most important output is the compact CSS, but the audit decides how much confidence to place in it. A smaller Output size and positive Bytes saved show compression success. Browser parser, Brace structure, and String/comment closure show whether the compact result deserves another review before it is used.

  
Do not treat Parser pass as a visual QA result. CSS error recovery can ignore invalid pieces and continue parsing later rules, and imported stylesheets are outside this check. Test the copied CSS in the target page when layout, cascade order, or browser support matters.

  
    
    
  • Comments removed plus Comment policy tells you whether protected notices survived.
    • 
    
  • Longest output line helps explain why the result is hard to read even when it is valid.
    • 
    
  • At-rule coverage: Review means at least one @import remains and external CSS still needs its own check.
    • 
    
  • Modern CSS cues: Detected means custom properties or math functions were found, not that those features are supported by every browser you care about.
    • 
  






  
Worked Examples:

  
A small token stylesheet with 13 source lines, one protected comment, two custom properties, one @media block, and two CSS math functions starts at 263 B. With important comments preserved, Output size becomes 212 B, Bytes saved is 51 B, and Comments removed is 0 with one protected comment kept. The compact CSS still keeps spacing inside calc(100% - 2rem).

  
A 95 B button rule with /*! Theme license */, one normal developer note, and padding: calc(1rem + 2px) compresses to 65 B when important comments are preserved. Switching Comment handling to strip-all changes Output size to 47 B and Comments removed to 2, so the smaller result is only appropriate when the protected notice is no longer needed in the shipped CSS.

  
A broken two-line source such as .card { color: #111827; followed by .title { font-weight: 700; can still compress from 50 B to 43 B, but Brace structure reports Review with a balance of 2. The size change is not useful until the missing closing braces are fixed and the audit returns to a balanced state.






  
FAQ:

  

    Does minification guarantee the CSS behaves the same?
    
No. The minifier keeps strings, needed separators, and core CSS tokens intact, but it does not run visual regression tests, resolve imports, or compare browser support. Use the audit first, then test the copied CSS where it will be used.

  

  

    Why are some spaces left in the output?
    
Some spaces keep CSS valid. Expressions such as calc(100% - 2rem), adjacent identifier-like tokens, and function boundaries can need a real separator, so the output may keep a space even after most formatting is removed.

  

  

    What should I do when the browser parser says review?
    
Check Brace structure, String/comment closure, and the warning message. Common fixes are closing a quote, adding a missing brace, or removing an unterminated block comment before copying the compact CSS again.

  

  

    Are pasted files uploaded for minification?
    
The CSS/TXT file is read and minified in the browser, and there is no server minification step. Avoid sharing a page URL that contains sensitive source text if the current state is visible in the address bar.

  






  
Glossary:

  

    
CSS minification

    
Compressing stylesheet text by removing formatting that is not needed for parsing.

    
Protected comment

    
A block comment that begins with /*! and may need to remain for license or attribution notices.

    
At-rule

    
A CSS rule that starts with @, such as @media or @import.

    
Custom property

    
A CSS variable-like declaration whose name begins with --.

    
CSS math function

    
A function such as calc(), min(), max(), or clamp() that can require careful spacing.

    
Parser pass

    
A browser-side check showing that the compact CSS could be parsed into one or more rules in a supporting browser.

  






  
References: