CSS Fetch: CSS Viewer to Copy CSS, Tailwind & Design Tokens

Inspect any element, check contrast and copy clean CSS, Tailwind or JSX in one click. Export any site's colors, fonts and spacing.

CSS Fetch is a CSS viewer for developers and designers. Hover any element on any website to see its styles, then click once to copy clean code you can paste straight into your project. FREE LAUNCH: Every feature, including Tailwind, JSX, components and design-token export, is free with unlimited copies until the first week of December. No account and no credit card needed. WHAT YOU CAN DO • Inspect: hover to see font, colors, spacing, radius and text contrast in a live tooltip. • Copy CSS: get the rules the author actually wrote, with variables resolved, browser defaults removed and :hover, :focus and ::before states included. • Convert to Tailwind CSS: classes that work in Tailwind v3 and v4, ready for your markup. • Copy as JSX: a React-ready style object. • Copy whole components: rebuild a section as HTML + CSS with all its children, or open it in CodePen. • Check accessibility: WCAG 2.2 contrast ratio with AA and AAA grades, measured against the real background. • Export design tokens: pull a site's colors, fonts, type scale, spacing, radii and shadows as CSS variables, a Tailwind theme or W3C design-token JSON. WHAT HAPPENS AFTER THE LAUNCH From the first week of December, CSS Fetch will have a free plan and an optional Pro license: • Free, forever: unlimited inspecting and contrast checks, plus 15 CSS copies a day. • Pro: unlimited copies, Tailwind, JSX, components and design-token export. It's a one-time payment for a lifetime license, with an early-bird price for launch users. Nothing you've already copied is affected, and the free plan stays free. HOW TO USE IT 1. Open any website and press Alt+Shift+C (or click the toolbar icon). 2. Hover an element. Use the arrow keys to move to its parent, child or sibling. 3. Click to copy. Switch tabs for Tailwind, JSX or HTML + CSS. 4. Press Alt+Shift+T to see and export the page's design tokens. WHY CSS FETCH • Output reads like hand-written code, not a dump of computed values. • Works on modern sites: cascade layers, native nesting, logical properties, strict Content-Security-Policy pages and right-to-left layouts. • Private by design: CSS Fetch only runs on the tab where you start it. No account and no tracking. Page content never leaves your browser. Good for front-end developers, UI designers, students learning CSS and anyone who wants to understand how a page is built. Available in English, Spanish, Portuguese, French, German, Japanese, Chinese and Korean. Enjoying the free launch? A review helps a lot. Questions or ideas? Use the support tab on this page.