Unused CSS Finder
Every line of CSS your browser downloads, parses, and indexes has a cost - even if it never matches a single element on the page. Over time, stylesheets accumulate dead weight: rules left behind after a redesign, utility classes that were copied from a template but never used, component styles for features that were removed, and vendor overrides that no longer apply.
The result is a stylesheet that is larger than it needs to be, slower to parse on low-powered devices, and harder to maintain. This tool lists every rule that doesn't match anything in your HTML or in the classes your JavaScript adds, lets you review the list, and gives you a cleaned stylesheet with everything else left exactly as you wrote it.
Unused CSS Finder
The page and its stylesheets and scripts on the same domain are fetched, including same-domain @import files. Stylesheets on other domains (Google Fonts, CDNs) are skipped, and so are scripts over 500 KB. Pages behind a login can't be fetched: paste their code instead.
HTMLMarkup
CSSStylesheet
JSScripts optional
HTMLPage source
The CSS comes from the page's <style> blocks and the JavaScript from its inline <script> blocks. Linked files aren't fetched in this mode: use Scan a URL, or paste them into the separate fields.
Review before deleting. This is static analysis: classes added by a CMS, built from strings such as 'btn-' + size, or added by third-party scripts can't be seen. Untick anything you know is used, or add it to the safelist.
Rules
Ticked rules are removed from the cleaned CSS. Changes update the output straight away.
CSSCleaned
A careful tool for cleaner stylesheets
How it works
The tool reads your stylesheet into a tree of rules, then tests every selector against a document built from your HTML with the browser's own querySelector. Compound selectors, attribute selectors, combinators, :has(), :is() and :nth-child() are matched exactly as the browser matches them.
A rule is kept when any selector in it matches. When nothing matches, the tool looks at your JavaScript and HTML for the class and ID names that code adds at runtime. It recognises vanilla JS (classList, className, setAttribute, dataset), jQuery (addClass, toggleClass, attr(), $() selectors), React (className, clsx, classnames, cn(), template literals), Vue and Alpine.js (:class, v-bind:class, x-bind:class), Angular ([class.foo], [ngClass]) and Svelte (class:foo).
What it handles
- Conditional blocks. Rules inside
@media,@supports,@layer,@containerand@scopeare tested one by one. A block is removed only when nothing is left inside it. - Native nesting.
&:hover,&.active,.childand nested@mediaare resolved against every parent selector before testing. - States and pseudo-elements. For
:hover,:focus,:checked,::before,::placeholderand the like, the element itself is tested. If it exists, the rule is kept. - Selector lists.
h1, h2, .titleis split correctly, even with commas inside:is()or:not(). Unused selectors can be trimmed from a list that is otherwise in use. - @keyframes and @font-face. Removed only when no kept rule, inline style or script refers to the animation or font name. Turn this off in Options to keep them all.
- Anything it can't test (a selector the browser doesn't support, for example) is kept, never removed.
Known limitations
This is static analysis. The tool doesn't run your JavaScript, click through your pages or watch a framework render, so it can flag rules that are in fact used:
- Classes added by a CMS, database or server-side template on other pages or for other users
- Class names built from strings, such as
'btn-' + variant - CSS Modules, styled-components, Emotion and other tools that generate hashed class names
- Styles used inside iframes, Web Components or Shadow DOM
- Classes added by third-party scripts, chat widgets or ad networks
- Styles for other pages that share the same stylesheet: a URL scan checks one page
Treat the results as a checklist to review, not an automatic delete list. Untick anything you know is used, add recurring names to the safelist, and test the cleaned stylesheet before it goes live.
Frequently Asked Questions
What is an unused CSS finder?
An unused CSS finder compares your stylesheet with your HTML and lists the CSS rules that don't match any element on the page. Stylesheets collect dead weight over time: rules left behind after a redesign, utility classes copied from a template and styles for features that were removed. The finder gives you a list of those rules so you can remove them and make your stylesheet smaller.
How does the Unused CSS Finder work?
The tool reads your stylesheet into a tree of rules and tests each selector against a document built from your HTML, using the browser's own querySelector, so matching is as accurate as the browser's. For classes that only appear at runtime, it also scans your JavaScript for the patterns used by vanilla JS, jQuery, React, Vue, Alpine.js, Angular and Svelte.
Is my code sent anywhere?
Not when you paste it. The analysis runs entirely in your browser, so pasted HTML, CSS and JavaScript never leave your computer. When you scan a URL, a small proxy on CSS Portal's server fetches the page and its files for you (browsers can't fetch other sites directly). The code is passed straight to your browser and isn't stored or sent to any third-party service.
Why is a rule showing as unused when I know it is used?
Usually the class is added after the page loads, or comes from a CMS or database. If your JavaScript adds it, paste that script into the JavaScript field and the scanner will usually find it. If it comes from a CMS, another page or a CSS-in-JS library, the tool can't see it. Untick the rule in the list, or add the class to the safelist in Options so it is always kept.
Can I use this with Tailwind, Bootstrap, or other frameworks?
Yes, with care. If you paste the compiled CSS with your HTML, the tool shows which compiled classes that HTML doesn't use. Classes applied by scripts or templates you didn't include will be flagged too, so use the safelist with wildcards (for example is-* or modal-*) to protect them. Bootstrap's component scripts add classes such as show, collapsing and modal-open, which are worth safelisting if you don't paste Bootstrap's JavaScript.
Does the cleaned output minify the CSS?
No. The cleaned stylesheet is your original text with the unused rules cut out, so everything that stays keeps its order, formatting and comments, and you can diff it against the original. To minify the result, run it through the CSS formatter and minifier.
Can I scan a page that requires login?
Not with the URL scanner: the proxy fetches pages without your login, so you would get the login page. Instead, open the page in your browser, copy the page source (or the rendered HTML from DevTools) and its stylesheets, and paste them into Paste code.
What CSS features does the tool handle?
Rules inside @media, @supports, @layer, @container and @scope are tested one by one, and a block is removed only when it is empty. Native nesting (&:hover, .parent { .child { } }, nested @media) is resolved before testing. States such as :hover and pseudo-elements such as ::before and ::placeholder are tested on the element they belong to. @import and @charset are always kept, and unused @keyframes and @font-face rules can be removed too.
What are the limitations of static CSS analysis?
The tool only sees the HTML, CSS and JavaScript you give it. It doesn't run JavaScript, simulate clicks or see a framework's rendered output. Classes added by a CMS, class names built from strings such as 'btn-' + variant, styles inside iframes or Shadow DOM, classes added by third-party scripts and hashed names from CSS-in-JS libraries can't be detected. Always review the list before removing rules from production code.
How does URL scanning work and what gets fetched?
The tool fetches the page through a proxy on CSS Portal's server, which avoids the browser's cross-site restrictions. It then fetches the page's stylesheets (<link rel="stylesheet">), any @import files and its scripts (<script src>), but only those on the same domain as the page. Inline <style> and <script> blocks are included too. Stylesheets on other domains, such as Google Fonts and CDN libraries, are skipped, and so are scripts over 500 KB and files over 5 MB. Only public addresses can be scanned.
Why should I remove unused CSS?
Every rule your browser downloads has to be parsed, even if it never matches an element. Removing unused CSS makes the file smaller, which helps pages load faster, especially on phones and slow connections, and it reduces the work the browser does before it can render. A smaller stylesheet is also easier to maintain and debug.
Is it safe to delete all the rules the tool flags as unused?
Not without checking. The tool can't see classes added at runtime by code you didn't paste, by server-side templates, by other pages or by third-party scripts, so a flagged rule may still be needed somewhere. Use the list as a checklist: untick the rules you know are used, check the rest in your codebase and test the cleaned stylesheet before it goes live.