Isolate the rules used above the fold

Front-end developers can isolate the CSS needed first when the visible part of a page must appear sooner.

Isolate the rules used above the fold. The result stays in your browser, ready to review, copy and adapt without an account or any transfer of your input.

How to use

Paste the HTML for the part of the page visible at the top.
Add a separator line made of two dashes.
Paste the complete stylesheet used by that page below the separator.
Run the extraction to get the rules needed for the first render.

Example

A front-end developer is tuning a homepage where the header and menu must appear quickly. They paste the header HTML, add the two dashes, then include the full stylesheet. The output helps prepare a critical CSS block before further optimisation. They then test the result on a copy to spot any missing rules.

Input

<h1 class="title">Hello</h1>
--
.title { color: #333; }
p { margin: 0; }

Limits and formats

The tool does not fetch a page from a URL; you must supply the HTML and CSS.
Styles added by JavaScript or complex pseudo-elements may be missing.
Test the extracted rules in a browser before deploying them.
A very large page may need a smaller, more deliberate selection.
Comments and unused rules can make the output heavier.

Where processing happens

The HTML and CSS you paste stay in your browser. Rule extraction happens on your device, and nothing is sent away from the page. The result is not retained after you leave.

Frequently asked questions

Which HTML should I provide?

Provide the markup for what users see before scrolling, such as the header, navigation and first content block. Critical CSS depends on that initial viewport. A wider extract usually produces less focused rules.

Why are some rules missing?

The tool reads the HTML and CSS you paste, but it does not run the page JavaScript. Classes added later or styles computed by the browser may be absent. Add them manually if the first render needs them.

Can I publish the extracted CSS directly?

Test it on a copy first. Check that the initial layout stays intact and that fonts remain available. Critical CSS usually complements the main stylesheet rather than replacing it in every situation.