What is Critical CSS?

Critical CSS is the minimum set of CSS rules needed to render the above-the-fold content of a webpage. By inlining only these rules in the HTML head, you eliminate render-blocking CSS requests and dramatically improve First Contentful Paint (FCP) and Largest Contentful Paint (LCP) times.

How does this Critical CSS Extractor work?

The tool renders your HTML in a sandboxed iframe at the viewport dimensions you specify. It then identifies which elements are visible above the fold and filters your CSS to only include rules that match those elements, plus essential at-rules like @font-face and @keyframes declarations that are referenced by critical elements.

Is my code safe when using this tool?

Yes. All processing happens entirely in your browser. Your HTML and CSS are never uploaded to any server. The tool uses a sandboxed iframe for rendering, so no external resources are loaded and no scripts in your HTML are executed.

How should I use the extracted Critical CSS?

Inline the critical CSS in a style tag in your HTML head. Then load the full CSS asynchronously using a link tag with media=print and an onload handler that switches it to media=all. This gives users immediate visual rendering while the full stylesheet loads in the background.

Does this tool handle media queries and @font-face rules?

Yes. The extractor preserves media queries that contain critical rules, includes @font-face declarations for fonts used by above-the-fold elements, and retains @keyframes animations referenced by critical elements. It also handles CSS custom properties (variables) defined on :root or html.

Free Online Critical CSS Extractor (No Signup) – FreeWWW

Critical CSS Extractor

Extract above-the-fold CSS from any webpage to eliminate render-blocking stylesheets and speed up your page load. All processing happens in your browser — your code never leaves your device.

How It Works

Paste your HTML and CSS below, choose a viewport size to define the “fold,” and click Extract Critical CSS. The tool renders your page in a sandboxed iframe, identifies which elements are visible in the viewport, and outputs only the CSS rules needed for that initial view. Inline the result in a <style> tag in your <head> for an instant performance boost.

HTML Input

Drag & drop an HTML file here, or click to browse

Try a sample:

External CSS (Optional)

Drag & drop a CSS file here, or click to browse

Auto-extract CSS from HTML <style> tags

Viewport:

W: H:

Minify output

Include :root variables

Include @font-face

Analyzing above-the-fold elements...

How It Works

HTML Input

External CSS (Optional)

Quick Implementation Snippet