Critical CSS Generator
Paste your HTML and CSS to extract only the rules the page actually uses above the fold. Understands compound selectors, descendant and child combinators, grouped selectors, @media blocks, and @keyframes referenced by used rules, and always keeps @font-face and :root. See live coverage stats, then copy the inline <style> tag plus an async preload snippet for the deferred CSS.
About this ToolHow it works, benefits & use casesTap to collapse
Render-blocking stylesheets delay first paint, so inlining only the CSS that styles above-the-fold content is a proven way to speed up perceived load. Paste your page HTML and your full stylesheet and this tool does selector-aware extraction: it reads every id, class, tag, and attribute present in the markup, then keeps only the CSS rules whose selectors are actually used. It understands real selectors - multi-class compounds like .btn.primary (kept only when both classes appear), descendant and child combinators like .sidebar .widget or .content > .intro (deferred when an ancestor is missing), and grouped selectors, which it splits so the used parts stay critical while the unused parts move to the deferred sheet. @media blocks are preserved when they nest a used rule, @keyframes are pulled into the critical set only when a kept rule references the animation, and base at-rules that affect first paint - @font-face, :root, html, body, and the universal selector - are always kept. You get the extracted critical CSS, the deferred (non-critical) CSS as a separate output, and live coverage stats: total versus critical rule counts, critical size in KB, and the percentage of the stylesheet that is critical. A minify toggle compacts every output, and the Implementation panel assembles the two snippets you ship - an inline <style> tag for the <head> and a preload link (with a <noscript> fallback) that loads the full stylesheet asynchronously - using a stylesheet path you specify. Everything runs locally and the whole input is captured in a shareable URL.
How to Use
- 1Paste your page markup into the HTML panel, or click Load example to start from a sample page and stylesheet.
- 2Paste your complete stylesheet into the CSS panel - extraction runs live as you type.
- 3Review the coverage cards: Total rules, Critical rules, Critical size, and what percentage of the CSS is critical.
- 4Read the Critical CSS output (inline this) alongside the Deferred CSS (load this asynchronously).
- 5Toggle Minify to compact every output, set the Full stylesheet path, then copy the Implementation snippet - the inline <style> tag plus the async preload link.
Key Benefits
- Selector-aware matching against the real ids, classes, tags, and attributes in your HTML
- Handles multi-class compounds, descendant and child combinators, and grouped selectors
- Keeps @media blocks that nest a used rule and @keyframes referenced by used animations
- Always keeps @font-face, :root, html, body, and the universal selector as base styles
- Splits the stylesheet into separate critical and deferred outputs
- Live coverage stats: total vs critical rule counts, critical KB, and critical-of-total percentage
- Minify toggle plus a ready-to-paste inline <style> tag and async preload snippet
- Runs entirely in your browser and is fully shareable via URL - nothing is uploaded
Common Use Cases
- Inlining above-the-fold CSS to improve First Contentful Paint and Largest Contentful Paint
- Reducing render-blocking requests flagged by Lighthouse or PageSpeed Insights
- Producing the inline-style plus async-preload pattern for a landing page or marketing site
- Estimating how much of a large stylesheet is actually needed for the initial view
- Splitting a stylesheet into critical and deferred bundles to hand to a build step
The markup for the page (above-the-fold structure)
Your full stylesheet
Rules used above the fold — inline this
Paste HTML and CSS to extract critical styles.
Everything else — load this asynchronously
Deferred (non-critical) CSS will appear here.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- CSS FormatterFormat and beautify CSS code
- CSS MinifierMinify CSS code
- Mobile Performance CheckerAn interactive mobile-performance audit with a weighted readiness score, Core Web Vitals thresholds (LCP/INP/CLS), per-category breakdown, "fix these first" guidance, and shareable progress
- Bundle Analyzer VisualizerPaste a bundle file list to get a visual size treemap, gzip/brotli estimates, performance-budget pass/fail checks, and a build-vs-build diff of what grew or shrank
- Bundle Size CalculatorEstimate package sizes and analyze bundle impact on your application
- Image Optimization CalculatorPlan responsive images — recommended breakpoints with ×1/×2 DPR, ready-to-paste srcset/picture/Next.js <Image> markup, per-format byte estimates, and total savings vs shipping the full-size original
It extracts every id, class, tag name, and attribute name from your HTML, then keeps any rule whose selector is satisfied by those tokens. A compound selector like .btn.primary is kept only when both classes appear on an element, and a descendant selector like .sidebar .widget is deferred if .sidebar is never present. Grouped selectors are evaluated part by part. Base styles that affect first paint - the universal selector, html, body, :root, and @font-face - are always kept.
A naive extractor keeps a rule if any single class or tag in the selector appears anywhere. This tool requires every simple piece of a compound selector to be present, respects descendant and child combinators (so an unused ancestor defers the whole rule), splits grouped selectors so only the used parts stay critical, walks into @media and @supports blocks, and follows animation references into @keyframes. The result is a much smaller, more accurate critical set.