What is the difference between CSS Minifier and Variables Refactor?
CSS Minifier focuses on reducing file size for faster delivery. Variables Refactor focuses on code structure by extracting repeated values into reusable :root variables.
CSS Optimization
CSS Optimization Toolkit (Minify + Variables Refactor)
Optimize styles directly in your browser: minify CSS/SCSS/SASS/LESS/Stylus files and refactor repeated values into reusable CSS variables. Reduce stylesheet size and improve maintainability in one workflow.
Free tier: 10 style files per dayUpgrade to PRO for unlimited access
Daily usage: 0/10 files
Choosing CSS compiles SCSS/SASS/LESS into minified CSS.
Manual CSS input
Bytes: 0 BGzip est.: 0 BBrotli est.: 0 BSelectors: 0Rules: 0Duplicate values: 0
If no files are uploaded, running optimization from this editor counts as 1 file for daily quota.
Manual input result
Bytes: 0 BGzip est.: 0 BBrotli est.: 0 BSelectors: 0Rules: 0Duplicate values: 0
Key features
Two tools in one page
Switch between CSS Minifier and Variables Refactor in one workspace for both performance and maintainability tasks.
Multi-format minification
Optimize CSS, SCSS, SASS, LESS, and Stylus-like files with safe, balanced, or maximum compression modes.
Automatic variables extraction
Detect repeated values and convert them into reusable CSS variables to build cleaner token-based stylesheets.
Flexible output actions
Copy or download refactored CSS instantly, or export minified batches as ZIP for deployment pipelines.
Local processing
All transformations are executed in your browser to keep source styles private during optimization.
Plan-based daily limits
Free plan includes 10 style files per day. PRO and PREMIUM get unlimited daily optimizations.
How CSS Minifier reduces stylesheet size and improves performance
CSS Minifier removes comments, whitespace, and redundant fragments from CSS, SCSS, SASS, LESS, and Stylus files. Smaller stylesheets load faster, parse faster, and improve Core Web Vitals on mobile and desktop.
Choose between safe, balanced, or maximum compression modes. Safe mode keeps critical whitespace, balanced mode applies standard minification rules, and maximum mode strips everything unnecessary for production delivery.
The workflow stays fully in-browser. Upload batch files, select minification level, preview results, and download a ZIP archive without sending source code to third-party processors.
This page is practical for release workflows where teams need consistent output before commit or deployment. Minified CSS is easier to cache, faster to transfer over mobile networks, and cheaper to serve at scale.
You can use CSS Minifier as a pre-check before CI pipelines: quickly compare source and minified payload, then ship compact styles with predictable rendering behavior.
Useful links for CSS optimization workflow
CSS Optimization FAQ
Will Variables Refactor break my existing selectors or layout?
No. The tool only replaces repeated declaration values with var(--token) references and keeps selectors and property names intact.
Can I refactor only values repeated 3+ times?
Yes. In Variables Refactor tab you can choose the minimum repeat threshold, so only frequent values become CSS variables.
Is this tool suitable for production CSS optimization?
Yes. Use minification to reduce payload and variables refactor to improve maintainability, then export code for your build pipeline or direct deployment.