Remove Unused CSS Online
Paste the HTML and the CSS, and keep only the rules that match something on the page.
Remove Unused CSS Online
PurgeCSS made the idea popular: compare a stylesheet with the markup that uses it and drop every rule that matches nothing. This page does that in your browser. It opens the Unused CSS Remover on its HTML + CSS tab, where you paste the page and its stylesheet, and nothing leaves your machine.
What is kept
- A rule with at least one selector that matches an element in the HTML.
- A selector with a state or pseudo-element, such as
.btn:hoveror.icon::before, when the element without that part exists. - Anything in Always keep: class names, ids with or without
#, and patterns between slashes. - Any selector the browser cannot parse, rather than a guess.
@font-facealways, and@keyframeswhile a kept rule or an inline style still names the animation.
The classes you cannot see
The HTML you paste is a snapshot. Scripts add classes as the page runs: an open menu, an active slide, a sticky header, a validation error. Their rules look unused because the snapshot has no element with those classes. Put them in Always keep. Frameworks and page builders often share a prefix, so a single pattern such as /^is-/ or /^elementor-/ covers a family of them. If you can record the page in Chrome instead, the coverage JSON to CSS page sees what the browser actually applied, including those runtime classes.
An example
A Bootstrap-based landing page that uses a grid, a navbar and two button styles still loads the whole framework. Paste the page and the stylesheet, add the classes the navbar toggles, such as show and collapsing, to Always keep, and most of the framework drops out. The Removed selectors list shows what went, which is the quickest place to catch a class that should have stayed.
Online or in a build
For a one-off page, a template or an email, this page is quicker than installing anything. For a site that changes, run PurgeCSS in the build so the CSS is cleaned again every time the markup changes: npx purgecss --css css/style.css --content index.html --output dist/css/. Either way, test the page at every width before you replace the original stylesheet.