Loading
Minify CSS to reduce file size or beautify minified CSS for readability. See size savings.
Minify CSS to reduce file size or beautify minified CSS for readability. See size savings.
Subscribe to get notified about new tools and features.
Paste your CSS code into the input editor. The tool handles all CSS syntax including media queries, animations, custom properties (CSS variables), selectors, and vendor prefixes.
Click the Minify button to compress your CSS by removing whitespace, comments, and unnecessary characters. The tool shows the original and compressed file sizes along with the savings percentage.
Use the Beautify button to format minified CSS into readable code with proper indentation. This is useful when debugging production stylesheets or reviewing third-party CSS.
Copy the result to use in your stylesheets. Use minified CSS for production and beautified CSS for development and debugging.
CSS files are render-blocking resources, meaning browsers cannot display the page until CSS is fully downloaded and parsed. Smaller CSS files load faster, directly reducing the time to first paint and improving the user experience.
Performance tools like Google Lighthouse, PageSpeed Insights, and WebPageTest specifically flag unminified CSS as a performance issue. Minifying CSS is one of the simplest ways to improve your performance scores and technical SEO.
Modern web applications often accumulate large CSS files through frameworks, design systems, and iterative development. Minification can reduce CSS file sizes by 20-40%, which is significant for bandwidth savings across thousands of page views.
All CSS processing happens locally in your browser. Your stylesheets, including any proprietary design system code or brand-specific styling, remain completely private.
The beautifier helps you understand and debug minified CSS from production sites, CDN-hosted frameworks, or compiled CSS-in-JS output.
For production websites, combine CSS minification with tree-shaking (removing unused CSS rules) for maximum file size reduction. Tools like PurgeCSS can identify and remove unused styles.
Use source maps in development to debug minified CSS. Source maps link minified CSS back to original source files, making it easy to find and edit the right rule.
Consider critical CSS extraction: inline the CSS needed for above-the-fold content and defer loading the rest. This combined with minification dramatically improves perceived loading speed.
When using CSS custom properties (variables), minification preserves variable names since they are part of the runtime API. The savings come from whitespace and comment removal.
CSS minification removes all unnecessary whitespace (spaces, tabs, newlines), comments (/* ... */), redundant semicolons after the last property in a rule, unnecessary quotes in url() values, leading zeros in decimal values (0.5 becomes .5), and redundant units on zero values (0px becomes 0). All of these removals are safe and do not change how browsers interpret the CSS.
No. CSS minification only removes characters that browsers ignore during parsing. The visual output of your styles remains completely identical. The browser computes the same CSS Object Model (CSSOM) from both minified and unminified versions. Media queries, animations, transitions, custom properties, and all other CSS features work exactly the same after minification.
Typical CSS minification achieves 15-30% file size reduction, depending on the original code's formatting and comment density. Heavily commented CSS with generous whitespace can see up to 40% reduction. When combined with server-side Gzip or Brotli compression, total network transfer savings typically reach 80-90% of the original file size.
Most modern build tools (webpack, Vite, Parcel, Next.js) include CSS minification in their production build process. If your build pipeline already minifies CSS, running it through this tool again will have minimal additional effect. This tool is most useful for standalone CSS files, quick one-off minification, or beautifying already-minified CSS for debugging.
Yes, completely safe. All processing happens in your browser using JavaScript. Your CSS code is never sent to any server, never stored, and never logged. This makes the tool safe for proprietary stylesheets, design system code, and any CSS containing confidential brand or application-specific information.
Yes. The minifier correctly handles all modern CSS features including custom properties (--variable-name), calc() expressions, CSS Grid, Flexbox, CSS animations, container queries, and all at-rules (@media, @keyframes, @layer, @container). Variable names are preserved since they are referenced at runtime, while surrounding whitespace and comments are safely removed.
Format, validate, and beautify your JSON data online. Minify or prettify JSON with syntax highlighting.
Encode text to Base64 or decode Base64 strings online. Supports UTF-8 text and file encoding.
Test and debug regular expressions online with real-time matching. Highlight matches and view groups.
Generate SHA-1, SHA-256, SHA-384, SHA-512 hashes from text online. Free cryptographic hash generator.