Reading a site without a browser

Fetch the HTML, then the stylesheets it links, then grep. That answers most questions a scriptable browser answers and a few it cannot.

Do not use a markdown-converting fetch for this. It strips exactly what you came for, so fetch the raw bytes. Work in a temporary directory, never in the user's project.

cd "$(mktemp -d)"curl -sL --max-time 25 "$URL" -o page.htmlwc -c page.htmlgrep -oE 'href="[^"]*\.css[^"]*"' page.html | sed 's/href="//;s/"$//' | sort -u

Pull each stylesheet the same way into style.css, resolving protocol-relative and root-relative hrefs against the page's origin first.

Utility CSS is self-describing

Where the site uses utility classes, the markup already contains the declarations and no stylesheet lookup is needed. Grep the class attribute for the effect:

grep -oE '(backdrop-)?blur-\[[^]]*\]|(backdrop-)?blur-[a-z0-9]+' page.html | sort | uniq -c | sort -rngrep -oE 'class="[^"]*(gradient|blur|mask|mix-blend)[^"]*"' page.html | head -20

A class list carries every responsive and state variant at once. blur-[50px] md:h-214 md:-translate-x-1/2 says the element changes shape at the md breakpoint.

Semantic CSS gives you a hashed class name instead, such as Hero_glow__a1b2c. Take that name to the stylesheet and grep it there.

Inline styles carry the values utilities cannot express

A multi-stop gradient is usually too specific for a utility, so it lands in a style attribute:

grep -oE 'linear-gradient\([^)]*\)' page.html | sort -u | headgrep -oE 'radial-gradient\([^)]*\)' page.html | sort -u | headgrep -oE 'style="[^"]*(transform|filter|mask)[^"]*"' page.html | head

The stylesheet, for tokens and generated utilities

grep -oE '(:root|:host)[^{]*\{[^}]*\}' style.css | head -3 | tr ';' '\n'   # the token layergrep -oE '@layer [a-z, ]+' style.css | sort -u                             # Tailwind v4 emits theme, base, components, utilitiesgrep -oE '@media[^{]*\((m(in|ax)-width:|width *[<>])[^)]*\)' style.css | sort -u   # real breakpointsgrep -oE '@font-face\{[^}]*\}' style.css | head                           # families, weights, formatsgrep -oE '@keyframes [a-zA-Z-]+' style.css | sort -u                      # named animations

To understand a custom utility, grep its class name in the stylesheet and read the declaration whole. That is how gradient-ease-in-out turns into its mechanism, a generated stop list built with color-mix() and relative color syntax.

Stack fingerprints from the HTML alone

grep -ocE '__NEXT_DATA__|/_next/static' page.html          # Next.jsgrep -oc 'self.__next_f' page.html                          # App Router with RSC payloadgrep -ocE '__NUXT__|/_nuxt/' page.html                      # Nuxtgrep -ocE '__remixContext|___gatsby|astro-island' page.html  # Remix, Gatsby, Astrogrep -oc 'class="[^"]*svelte-' page.html                     # Sveltegrep -oc 'data-radix-' page.html                             # Radix primitivesgrep -oc 'bg-linear-to' page.html                            # Tailwind v4, where v3 wrote bg-gradient-togrep -oE '<meta name="generator"[^>]*>' page.html

What this method cannot tell you

Say so rather than guessing past it:

• Paint order and what is actually visible. A declaration in the CSS may be overridden or never rendered.
• Live animation state. Whether an effect moves at all.
• Resolved values. A rem stays a rem, and you never learn the pixel size.