Inspect any element and copy clean CSS or Tailwind. Export a page's colors, fonts and spacing as design tokens.
Users
0
store count
Rating
0.0 / 5
unchanged in 30 days
Ratings
0
total ratings
Store rank
#378K
#283K among extensions
Version
1.2.3
updated 5 Oct 2026
About Copy Design — Inspect CSS & Tailwind
Inspect any element on any website and copy production-ready CSS or Tailwind — buy once, no subscription.
Copy Design gives developers and designers the fastest way to grab styles from a live page.
WHAT IT DOES
• Hover any element to see its size, display, font, colors, padding, margin, radius and shadow.
• Click to lock a selection; use the arrow keys to walk the element tree.
• Copy the element's CSS, HTML, Tailwind classes or a JSON snapshot.
• Extract a whole page's design system: color palette, type scale, spacing, radii and shadows.
• Export design tokens as CSS variables, a Tailwind config, or JSON.
• Move the panel wherever you like, collapse it, and it remembers your layout.
• Choose px or rem output, and your default copy format, in the options page.
WHY COPY DESIGN
• Buy once, own it forever — no monthly subscription.
• 100% local and private: nothing is uploaded, no account required.
• Works on every site — it reads whatever element you point at.
• Clean, modern UI that stays out of your way.
FREE
• Element inspector
• Copy CSS and HTML
• Color swatches
PRO (one-time)
• Copy Tailwind classes
• Copy JSON
• Page palette extraction
• Type scale extraction
• Design-token export (CSS vars / Tailwind config / JSON)
• Lifetime updates
Perfect for front-end developers, designers, agencies and anyone rebuilding or matching a UI.
Privacy policy: https://copy-design.netlify.app/privacy.html