CSS & JS Minifier
Minify your CSS and JavaScript code to reduce file size. Removing unnecessary characters like whitespace, comments, and newlines improves load times and performance.
Examples
Minify a Bootstrap-style button stylesheet
.btn-primary {
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out;
}.btn-primary{color:#fff;background-color:#0d6efd;border-color:#0d6efd;padding:0.375rem 0.75rem;border-radius:0.25rem;transition:color 0.15s ease-in-out}179B → 152B (15.08% saved). The whole rule collapses onto a single line with all comments and indentation stripped, the trailing semicolon removed, and no space around the colons, semicolons or braces.
Minify a flexbox centering rule
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 2rem;
}.container{display:flex;justify-content:center;align-items:center;height:100vh;gap:2rem}111B → 88B (20.72% saved). Even a short rule saves ~21% — the minifier's biggest win is removing the line breaks and trailing semicolons that developers add for readability.
Minify a JavaScript array filter
const users = [
{ id: 1, name: 'John', active: true },
{ id: 2, name: 'Jane', active: false },
{ id: 3, name: 'Bob', active: true }
];
// Filter active users
const activeUsers = users.filter(user => {
return user.active === true;
});const users=[{id:1,name:"John",active:true},{id:2,name:"Jane",active:false},{id:3,name:"Bob",active:true}];const activeUsers=users.filter(user=>{return user.active===true;});242B → 174B (28.10% saved). The JS pipeline removes both `//` line comments and `/* */` blocks, then collapses whitespace and strips space around every operator — `=>` becomes `=>`, `===` stays as `===`, and the entire program fits on one line.
About this tool
The CSS & JS Minifier compresses stylesheets and scripts by stripping every unnecessary character — whitespace, comments, trailing semicolons, and redundant operators — while preserving the original semantics. Shipping minified assets to production is one of the cheapest performance wins available: every kilobyte you shave off the wire reduces parse time, improves Core Web Vitals, and shortens time-to-interactive.
The tool runs a chain of regex transforms: comment removal, whitespace collapse, then targeted stripping of space around braces, colons, semicolons and operators, and finally trailing-semicolon cleanup. The same engine handles both CSS and JavaScript — the JS pipeline additionally strips line comments and tightens space around every operator — so you can paste, click, and get a single-line, production-ready file in a few milliseconds. Every operation runs locally in your browser; the source code never leaves the tab.
How to use
Pick a mode
Choose CSS Minifier or JS Minifier from the tab strip at the top of the input card.
Paste your code
Drop your formatted CSS or JavaScript into the input textarea, or click one of the Quick Start sample chips to load a representative example.
Run Minify
Click the Minify CSS / Minify JS button. The output appears in the right-hand card and a green banner shows the byte savings (original → new, percentage).
Copy the result
Use the Copy button in the output header to copy the minified payload to your clipboard, ready to paste into a build pipeline or serve from your CDN.
Use cases
Preparing assets for production deployment
Run your hand-written CSS or a small JS shim through the minifier before committing it, so what ships to users is a single-line payload with no comments and no wasted bytes.
Stripping comments from a third-party snippet
Paste a vendor snippet full of license headers and console.log calls, minify, and you have a clean file ready to inline into a page without the source-code noise.
Comparing the savings of a hand-tuned stylesheet
Minify a CSS file you've been polishing and use the byte counter to confirm the optimisations still pay off — sometimes the savings are too small to be worth losing readability.
Producing a quick inline asset for a one-page HTML email
Email clients need the smallest possible payload, and a request to an external file often fails. Minify a small CSS block and paste it into a <style> tag inside the document.
Common mistakes
Mistake:Running the minifier on an already-minified file and expecting another big win.
Fix:Once comments and whitespace are already stripped there is little left to remove — byte savings on a file straight from a real minifier like cssnano, esbuild or Terser will be tiny or zero.
Mistake:Pasting source that contains string literals with special characters and expecting them to be preserved correctly.
Fix:The regex pipeline is intentionally simple: it does not parse JavaScript. Strings like `' spaced '` or template literals with embedded `<`/`>` are left alone, but using a production-grade tool (esbuild, Terser, SWC) gives you safe identifier mangling and dead-code elimination.
Mistake:Treating the output as obfuscated.
Fix:Minification is reversible: paste the output back into any prettifier and you recover the original formatting (and original variable names). For code that must stay secret, use an obfuscator or a server-side build step.
Mistake:Shipping the unminified version because the file is small.
Fix:Even a few kilobytes of CSS or JS block render and lengthen time-to-interactive. The minifier is cheap to run, so always minify in production — the only safe exception is in-development debugging.
Frequently asked questions
Related guides
References & standards
Related tools
.htaccess Generator
Build an Apache .htaccess — HTTPS redirects, rewrites, error pages, security headers, and basic auth
2D Fluid Dynamics & Particle Physics Sandbox
A physics playground with two engines sharing one canvas. The fluid mode runs a real Eulerian Navier-Stokes solver — semi-Lagrangian advection, explicit diffusion, Jacobi pressure projection and vorticity confinement — that you paint with dye and velocity using mouse or touch. The particle mode is a damped Verlet N-body engine with gravity wells, Coulomb attractors and repulsors, spring links, wall restitution and elastic circle collisions. Particle counts adapt to the device (100k target on WebGL2 desktop, 2k-5k on CPU fallback), and every configuration exports as runnable code: a Matter.js world, a PixiJS ticker setup, or a standalone vanilla Canvas engine.
Algorithm Arena & Data Structure Visualizer
Interactive arena for algorithms and data structures: eight sorting algorithms racing on one seeded input, six pathfinding algorithms walking generated mazes, and BST, AVL, Red-Black, B-tree, heap and trie operations replayed step by step with rotations highlighted. Every run shows the Big-O table and the phase-highlighted reference implementation in four languages, and compared values can be played as pitch (sonification) through the shared audio engine. Everything runs client-side; inputs never leave the browser.
Ansible Playbook Generator
Build an Ansible playbook — hosts, vars, and tasks with modules — as YAML
Apache Config Generator
Build an Apache 2.4 VirtualHost — ServerName, DocumentRoot, Directory, aliases, and optional SSL
AWS Architecture Diagram
Drag-and-drop AWS service blocks, connect edges and export architecture diagrams as SVG