Remove Unused CSS
Our free online tool analyzes your HTML and CSS stylesheet, then safely strips selectors that aren't used, shrinking files and speeding up render times without changing your HTML.
This tool is available at GitHub PurgeCSS.
It’s especially helpful when you use frameworks or UI kits that ship thousands of default rules. Use the safelist to keep any dynamic classes added at runtime with JavaScript for example. The "before-after" live preview lets you compare the original rendering and the cleaned result side-by-side. When you’re satisfied, copy the cleaned CSS styles.
Why use it?
- Frameworks offer big CSS but your project usually use a small part of it.
- Purge keeps what's used, discards the unnecessary fluff.
- Smaller downloads, faster render, simpler maintenance.
How it works
- Parses your content for
class,id, and tag usage. - Compares findings to your CSS selectors.
- Removes rules that are't used. Optionally safelist dynamic selectors.
Under the hood
Scan Content
HTML, templates, and components are scanned for used selectors.
Match Selectors
Only rules referenced in your content are kept.
Purge & Output
Unused rules are removed; the result is your lean CSS.
Tips for best results
Safelist runtime toggles
Keep classes added by scripts or states you still need (e.g., .open, .is-active).
Scope by page
Group CSS per page or route to maximize the reduction effect.
Verify removals
Review the Removed selectors list so nothing critical is stripped.
Parts of The Dashboard
<button class="btn">
Buy now</button>.btn { padding: .75rem 1rem; }
.btn--alt { opacity: .7; }
.card {
box-shadow: 0 2px 6px #2F2);
}.btn { padding: .75rem 1rem; }Using dynamic classes?
Add them to a safelist to prevent their removl.
Do
- Clean up CSS to all your real content paths.
- Safelist classes generated by JS/frameworks.
- Compress your styles with the CSS editor.
Don't
- Purged global utility classes you still toggle.
- Forget to style dynamically inserted content.
- Ship both full and purged CSS to prod.
