GrabCSS

Copy any element's CSS & HTML in one click

5 followers

Copy any element's CSS & HTML in one click

5 followers

Copying CSS from a site usually means opening DevTools and digging through hundreds of inherited rules. GrabCSS makes it one click: hover any element, see its clean CSS in a card that follows your cursor, click to copy. What's different: • Copies the :hover / :focus / :active states DevTools hides • Copies clean HTML too, pretty-printed • WCAG contrast, color swatches, fonts, box model Chrome & Edge.

Free Options

Launch tags:Chrome Extensions•Design Tools•Developer Tools

Launch Team

Viktor.comAn AI coworker that actually does the work

Promoted

Maker

📌

Hey Product Hunt! 👋 I kept hitting the same chore: to copy a button or card's styles from a site, I'd open DevTools, scroll past hundreds of inherited rules, copy properties one by one — and still miss the :hover state. So I built GrabCSS. Hover any element → its clean, copy-paste-ready CSS appears in a card that follows your cursor → click to copy. It also grabs the HTML, reveals the hover/focus/active states DevTools hides, and shows colors, fonts and WCAG contrast. The hardest part was the "clean" output — filtering the ~350 computed properties down to only the rules that actually matter, and pulling pseudo-states straight from the page's stylesheets. Would love your feedback! 🙏

Report

2mo ago

Reviews