Unused CSS Finder
Free unused CSS finder. Paste HTML and CSS to list selectors that match nothing, estimate byte savings, and copy a used-only stylesheet in your browser.
Loading tool...
What is Unused CSS Finder?
Unused CSS Finder is a free browser tool that compares pasted CSS selectors with pasted HTML, lists rules that match nothing, and estimates how many bytes those unused rules occupy.
Key Benefits
- See unused selectors without uploading a project
- Estimate stylesheet bytes you could drop
- Copy unused CSS or a used-only snapshot
- Include @media and nested CSS in the scan
Common Use Cases
- •Cleaning a landing-page stylesheet before launch
- •Checking that a component CSS file only targets its markup
- •Estimating savings before a larger PurgeCSS pass
- •Reviewing CSS copied from a legacy page
How to Use Unused CSS Finder
- Paste HTML: Drop in a page fragment or full document. Classes added only by JavaScript will look unused because scripts do not run.
- Paste CSS: Add the stylesheet to check. @media, @supports, and nested rules are scanned; @keyframes and @font-face are skipped.
- Read the report: Unused rules appear with a byte estimate. Hover and focus variants count as used when the rest of the selector exists in the HTML.
- Copy the CSS you need: Copy unused CSS to inspect, or copy used-only CSS for a cleanup starting point.
Key Features
- Live unused-rule list with per-rule byte size
- Byte-savings summary against the pasted stylesheet
- Copy unused CSS or used-only CSS in one click
- Understands @media, @supports, and nested CSS with &
- Treats :hover and ::before as used when the base selector matches
Frequently Asked Questions
Why is a class marked unused when I know JavaScript adds it?
This tool only sees the HTML you paste. It does not run scripts, so classes, IDs, and elements created at runtime look unused. Paste the rendered markup from DevTools if you need coverage after JS.
Do :hover and ::before count as unused?
No, if the rest of the selector matches. a:hover is used when an a exists, and .btn::before is used when .btn exists. The tool strips dynamic pseudos and pseudo-elements before querying.
What about comma-separated selectors?
If any selector in the list matches, the whole rule is kept. .title, .ghost stays used when .title exists, even if .ghost does not.
Does my HTML or CSS leave the browser?
No. Parsing and matching run in this page. You can use the finder offline after the page has loaded.