Free tool
Site Style Report
Paste any public URL. Get back the site's color palette, typography, spacing values, border radii, and box shadows — all extracted from its real stylesheets in seconds.
Want this for any element, not just a whole page?
CSSpeek does per-element inspection live in your browser — click any element and see exactly the styles that apply. Add it to Chrome for targeted analysis that this tool can't do.
What the report contains
- Color palette. Every unique color referenced in CSS properties (foreground, background, border, fill, stroke), sorted by frequency. Each color is shown as a swatch with usage count.
- Typography. Font families declared in
font-familyvalues. The primary font of each stack is surfaced so you can identify webfonts at a glance. - Spacing. Distinct padding, margin, and gap values — useful for identifying the site's spacing scale.
- Border radii. The rounded-corner values in use (e.g., 4px, 8px, 16px).
- Box shadows. Complete shadow strings, including layered multi-shadow values.
What it can't see
Styles applied at runtime by JavaScript, shadow-DOM encapsulated styles, and fonts loaded by JS without a matching CSS declaration are not reported. For a complete live view of any element's styles, use a per-element inspector — that's what the CSSpeek extension is for.
Site Style Report: frequently asked questions
- How does this work under the hood?
- The tool fetches the public HTML at the URL you provide, pulls any linked stylesheets plus inline <style> blocks, parses them with a CSS parser, and tallies the color values, font families, spacing, radii, and shadows it finds.
- Will this work on login-walled or SPA-only content?
- Not fully. The tool fetches the raw HTML and CSS served to unauthenticated visitors. Styles injected by client-side JavaScript after page load aren't captured. For SPAs that render with Next.js or similar, the SSR'd content is usually enough to extract the design system.
- Why do I see fewer results than I expected?
- Sites with heavy CSS-in-JS runtime styling, or whose stylesheets exceed our 2 MB per-file cap, may have partial results. The stats line below the report shows how many files were analyzed.
- Is this an endorsement to copy someone's design?
- No. This tool is for research, audits, and inspiration — understanding design choices other teams have made. Values like padding and color are not copyrightable; the overall aesthetic of a site is. Use it to learn, not to clone.
- What about privacy?
- We don't store the URLs you submit. Requests are rate-limited per IP to prevent abuse. See our /privacy page for full details.
More free CSS tools
Free tool
CSS Specificity Calculator
See which selector wins the cascade.
Paste one or more CSS selectors and see their specificity tuple, a plain-English ranking, and which rule the browser will apply.
Open tool →Free tool
Tailwind Class Decoder
Read dense utility classes at a glance.
Paste a Tailwind CSS class string and see what each utility does, the resolved CSS, and a live visual preview.
Open tool →Free tool
Box Shadow Lab
Build layered shadows visually, copy the CSS.
Design single- or multi-layer box shadows with sliders and a live preview. Export the CSS when it looks right.
Open tool →