Paste your CSS and HTML to extract above-the-fold critical CSS. Generates inline styles and deferred stylesheet loading code.
You paste your full CSS and the page's HTML, then set an assumed viewport height (most people leave it around 600-800px for a typical laptop or tablet fold). The tool walks the markup in document order, estimating each element's height from declared dimensions, line-height, margin and padding values it finds in your stylesheet, and marks everything before that running offset crosses the viewport as above the fold. It pulls the matching selectors into an inline <style> block and rewrites the rest to load asynchronously. Because there's no live rendering, JavaScript-driven layout, web-font swaps, and flexbox/grid reflow can shift the real fold away from this estimate.
The tool reads the HTML top to bottom and keeps a running vertical offset, adding each element's estimated height from any inline width/height attributes plus the line-height, margin, and padding values it can find for that selector in the pasted stylesheet. Once the offset crosses the viewport height you specify, everything before that point in document order counts as above the fold; anything after it is treated as deferred content.
Selectors that match an above-fold element are copied into a compact inline stylesheet meant for the document head; everything else is written back out as an external file reference wrapped in a rel=preload tag with an onload handler that swaps it to rel=stylesheet, plus a noscript fallback so browsers without JavaScript still load the full stylesheet normally.
No - it estimates position from HTML order and the box-model values it can read out of your pasted CSS, without loading fonts, images, or executing JavaScript. Treat the output as a starting point and confirm the real fold with browser DevTools or a Lighthouse trace before shipping.
Yes, minified CSS parses fine, but very large stylesheets or documents may need trimming to the section you actually want checked. Matching happens by selector, so obfuscated, hashed, or dynamically-generated class names may not connect back to the right rules in your CSS.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Shorten URLs with local redirect tracking via localStorage. See click counts and generate a QR code for each link.
Build UTM-tagged URLs for campaign tracking with source, medium, campaign, term, and content parameters.
Enter 2+ headlines and see simulated previews in Google results, email subject lines, and social posts side-by-side.
Count characters for Twitter/X, LinkedIn, Facebook, and Instagram with platform-specific limits and warnings.
Calculate click-through rates from impressions and clicks with industry benchmarks and trend analysis.
Check email subject line length against best practices for desktop and mobile with preview text optimization.