Critical CSS Generator

Extract above-the-fold CSS styles from your HTML markup to eliminate render-blocking stylesheets.

Above-the-Fold HTML Markup

Full Stylesheet (CSS)

Generated Critical Inline CSS

/* Extracted Critical Above-the-Fold CSS */
.site-header { background: #0b0f17; padding: 16px;}
.nav-bar { display: flex; align-items: center;}
.logo { color: #10b981; font-weight: bold; font-size: 20px;}
.hero-section { padding: 64px 24px; text-align: center;}
.hero-title { font-size: 48px; color: #ffffff;}