Firefox ๋ธŒ๋ผ์šฐ์ € ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ
  • ํ™•์žฅ ๊ธฐ๋Šฅ
  • ํ…Œ๋งˆ
    • Firefox์šฉ
    • ์‚ฌ์ „ ๋ฐ ์–ธ์–ด ํŒฉ
    • ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ € ์‚ฌ์ดํŠธ
    • Android ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ
๋กœ๊ทธ์ธ
CSS DNA โ€” Inspect CSS & Extract Design Tokens ๋ฏธ๋ฆฌ๋ณด๊ธฐ

CSS DNA โ€” Inspect CSS & Extract Design Tokens ์ œ์ž‘์ž: CSS DNA

Inspect any element's CSS and extract a site's colors, fonts & design tokens โ€” export to Tailwind, CSS, JSON, Figma & more.

0 (๋ฆฌ๋ทฐ 0๊ฐœ)0 (๋ฆฌ๋ทฐ 0๊ฐœ)
Firefox๋ฅผ ๋‹ค์šด๋กœ๋“œํ•˜๊ณ  ํ™•์žฅ ๊ธฐ๋Šฅ์„ ๋ฐ›์œผ์„ธ์š”
ํŒŒ์ผ ๋‹ค์šด๋กœ๋“œ

ํ™•์žฅ ๋ฉ”ํƒ€ ๋ฐ์ดํ„ฐ

์Šคํฌ๋ฆฐ์ƒท
Click any element to copy its clean, minimal CSS โ€” no DevTools.Extract any site's full color palette โ€” copy as HEX, RGB, HSL or OKLCH.Export a site's design tokens to Tailwind, CSS, JSON, SCSS & Figma.CSS health audit plus accessibility & SEO checks with copyable reports.Inspect or extract a whole design system right from the toolbar.
์ •๋ณด
CSS DNA is the fastest way to inspect CSS and steal a website's design system โ€” the right way.

Stop digging through DevTools. Click any element to instantly copy clean, minimal CSS. Then scan the whole page to pull
its entire design language: every color, font, type size, shadow, gradient, and border-radius โ€” ranked by how often it's
used.

Export in one click to the format you work in:
โ€ข Tailwind config โ€” drop a site's palette + fonts straight into tailwind.config.js
โ€ข CSS variables โ€” a ready-to-paste :root { --color-โ€ฆ } block
โ€ข JSON design tokens โ€” for design systems and Style Dictionary
โ€ข SCSS variables & Figma tokens

โœจ Features
โ€ข Click-to-copy CSS for any element (minimal or full) โ€” walk the DOM with arrow keys
โ€ข Eyedropper + WCAG 2 and APCA (WCAG 3) contrast checking
โ€ข One-click design-system extraction: colors, fonts, type scale, spacing, radii, shadows, gradients, CSS variables,
breakpoints, @font-face, motion
โ€ข AI / DESIGN.md export โ€” the whole design system as an agent-ready brief for Claude, Cursor & Copilot
โ€ข OKLCH tonal scales, near-duplicate color detection, contrast grid & palette PNG export
โ€ข CSS health audit โ€” 0โ€“100 score for specificity, !important, duplicates, orphaned variables & consistency
โ€ข CSS stats & specificity graph; pseudo-state capture (:hover/:focus/::beforeโ€ฆ)
โ€ข Copy any element as Tailwind classes or a JSX style object โ€” and the full component
โ€ข Accessibility audit + SEO checker โ€” scored checklists with copyable reports
โ€ข 100% local โ€” no account needed, no data leaves your browser

Free forever: element CSS copy, eyedropper, and full design-system preview.
Pro (subscription): token exports (Tailwind / CSS vars / JSON / SCSS / Figma), audits & downloads.

Perfect for front-end developers, design engineers, and designers who want to learn from, rebuild, or audit any website's
styling in seconds.

โ€” No tracking. No ads. No analytics. Minimal permissions (only the tab you're on).
0๋ช…์ด 0์ ์œผ๋กœ ํ‰๊ฐ€ํ•จ
๋กœ๊ทธ์ธํ•˜์—ฌ ์ด ํ™•์žฅ ๊ธฐ๋Šฅ์˜ ํ‰์ ์„ ๋‚จ๊ฒจ์ฃผ์„ธ์š”
์•„์ง ํ‰์ ์ด ์—†์Šต๋‹ˆ๋‹ค

๋ณ„์  ์ €์žฅ๋จ

5
0
4
0
3
0
2
0
1
0
์•„์ง ๋ฆฌ๋ทฐ ์—†์Œ
๊ถŒํ•œ ๋ฐ ๋ฐ์ดํ„ฐ

๋ฐ์ดํ„ฐ ์ˆ˜์ง‘:

  • ๊ฐœ๋ฐœ์ž๊ฐ€ ์ด ํ™•์žฅ ๊ธฐ๋Šฅ์€ ๋ฐ์ดํ„ฐ ์ˆ˜์ง‘์ด ํ•„์š”ํ•˜์ง€ ์•Š๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ์ž๊ฐ€ ๋ฐ์ธ ์„ ํƒ์  ๋ฐ์ดํ„ฐ ์ˆ˜์ง‘:

  • ๊ฐœ์ธ ์‹๋ณ„ ์ •๋ณด
๋” ์•Œ์•„๋ณด๊ธฐ
์ถ”๊ฐ€ ์ •๋ณด
๋ถ€๊ฐ€ ๊ธฐ๋Šฅ ๋งํฌ
  • ํ™ˆ ํŽ˜์ด์ง€
  • ์ง€์› ์‚ฌ์ดํŠธ
  • ์ง€์› ์ด๋ฉ”์ผ
  • ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ ID ๋ณต์‚ฌ
๋ฒ„์ „
4.6.2
ํฌ๊ธฐ
50.13 KB
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ
7์ผ ์ „ (2026๋…„ 6์›” 23์ผ)
๊ด€๋ จ ์นดํ…Œ๊ณ ๋ฆฌ
  • ์›น ๊ฐœ๋ฐœ ๋„๊ตฌ
๋ผ์ด์„ ์Šค
All Rights Reserved
๊ฐœ์ธ์ •๋ณด์ฒ˜๋ฆฌ๋ฐฉ์นจ
์ด ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ๊ฐœ์ธ์ •๋ณด์ฒ˜๋ฆฌ๋ฐฉ์นจ ์ฝ๊ธฐ
๋ฒ„์ „ ๋ชฉ๋ก
  • ๋ชจ๋“  ๋ฒ„์ „ ๋ณด๊ธฐ
๋ชจ์Œ์ง‘์— ์ถ”๊ฐ€
์ด ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ ์‹ ๊ณ 
Mozilla ํ™ˆํŽ˜์ด์ง€๋กœ ์ด๋™

๋ถ€๊ฐ€ ๊ธฐ๋Šฅ

  • ์†Œ๊ฐœ
  • Firefox ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ ๋ธ”๋กœ๊ทธ
  • ํ™•์žฅ ๊ธฐ๋Šฅ ์›Œํฌ์ƒต
  • ๊ฐœ๋ฐœ์ž ํ—ˆ๋ธŒ
  • ๊ฐœ๋ฐœ์ž ์ •์ฑ…
  • ์ปค๋ฎค๋‹ˆํ‹ฐ ๋ธ”๋กœ๊ทธ
  • ํฌ๋Ÿผ
  • ๋ฒ„๊ทธ ์‹ ๊ณ 
  • ๋ฆฌ๋ทฐ ์ง€์นจ

Download

  • Download Firefox
  • Windows
  • macOS
  • iOS
  • Android
  • Linux
  • All

Latest Builds

  • Nightly
  • Beta

Firefox for Business

  • Enterprise

Community

  • Connect
  • Contribute
  • Developer

Follow

  • Instagram
  • YouTube
  • TikTok
  • Bluesky
  • Podcast
  • ๊ฐœ์ธ ์ •๋ณด
  • ์ฟ ํ‚ค
  • ๋ฒ•๋ฅ 

ํŠน๋ณ„ํ•œ ๊ณ ์ง€๊ฐ€ ์—†๋Š” ํ•œ, ๋ณธ ์‚ฌ์ดํŠธ์˜ ์ฝ˜ํ…์ธ ๋Š” Commons Attribution Share-Alike License v3.0 ๋˜๋Š” ๊ทธ ์ดํ›„ ๋ฒ„์ „์— ๋”ฐ๋ผ ์‚ฌ์šฉ์ด ํ—ˆ๊ฐ€๋ฉ๋‹ˆ๋‹ค.