Online Tool Store
Critical CSS Extractor
Paste your CSS and the HTML for your page's visible content to extract just the CSS rules that match, a simplified way to find above-the-fold "critical" CSS.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Example shown — replace with your own stylesheet and the markup that appears before scrolling.
Critical CSS
How Critical CSS Extractor works
- Paste your full stylesheet and the HTML that renders in the initial viewport (before scrolling).
- Click "Extract critical CSS" — the CSS is parsed into a real stylesheet using the browser's CSSOM (
CSSStyleSheet/CSSRule), the same object model the browser itself uses to apply styles. - Every rule's selector is tested against your HTML fragment with the browser's native
querySelector— a rule is kept only if it actually matches an element that's visible above the fold. - The surviving rules (plus any
@mediablocks that still have matching content) are shown as your critical CSS, ready to inline in the<head>.
Why this speeds up perceived load time
A browser blocks rendering until it has downloaded and parsed all linked CSS. Inlining just the rules needed for the first visible screen — and loading the rest of the stylesheet asynchronously afterward — lets the browser paint meaningful content sooner, without waiting on styles for a modal or footer the visitor hasn't scrolled to yet. This is the same underlying idea as dedicated critical-CSS build tools, simplified into a one-off, no-install browser check.
FAQ
What counts as "above-the-fold HTML"?
Whatever markup renders in the initial viewport before any scrolling — typically the header, navigation, and hero section. Paste just that fragment (not your whole page) so the tool only keeps CSS rules relevant to what a visitor sees immediately.
How does it decide which CSS rules to keep?
It parses your CSS into a real stylesheet object using the browser's own CSSOM, then for every rule, tests whether its selector matches any element in the HTML fragment you provided using the browser's native querySelector — a rule survives if (and only if) it could actually apply to the visible markup.
What happens to @media rules and rules that don't match?
@media blocks are kept if at least one rule inside them matches your HTML — the block wrapper is preserved around just the surviving inner rules. Non-matching rules (modals, tooltips, footer styles, print styles for hidden elements, etc.) are dropped from the critical output; you'd still load the full stylesheet asynchronously afterward so those styles are ready before they're needed.
How we compare
| Feature | Online Tool Store | Eyeballing which rules matter | A build-step critical-CSS plugin |
|---|---|---|---|
| No file upload — runs in your browser | ✓ | N/A | ✗ |
| No sign-up required | ✓ | ✓ | ✗ |
| Free, no watermark | ✓ | ✓ | ✗ |
A build-step plugin (like a webpack critical-CSS loader) needs a full project setup and a headless browser dependency to run. This tool gets you the same rule-matching logic for a quick one-off check, with nothing to install.