Max7Up Studio
HTML/CSS Extractor

FreeChrome and Firefox extension

Copy the HTML and CSS of any element

HTML/CSS Extractor adds a pane to the Elements panel in DevTools. Select an element and it shows the element's HTML and the CSS rules that style it, ready to edit, preview and copy.

Add to ChromeAdd to Firefox
Add to FirefoxAdd to Chrome

Screenshots

1 / 2

DevTools with the HTML/CSS Extractor pane showing the CSS for the selected heading, and switches for what to include.

How it works

  1. Open DevTools on any website: press F12, or Cmd+Option+I on a Mac.

  2. Select an element in the Elements panel (the Inspector in Firefox), or right-click it on the page and choose Inspect.

  3. Open the HTML/CSS Extractor tab in the panel's sidebar, alongside Computed.

  4. Check the live preview, edit the code if you like, and click Copy CSS or Copy HTML.

What it does

  • The rules that apply

    CSS rules from the page's stylesheets that match the element and everything inside it, including :hover, ::before and ::after rules, and media queries in their original order.

  • Shorter selectors

    Long selectors are cut down to the shortest form that still matches, with a comment showing the original selector and its specificity.

  • Live preview

    See the extracted code rendered at mobile (375 px), tablet (768 px) or desktop (1240 px) width. Links in the preview don't navigate.

  • Edit, then copy

    CSS and HTML open in separate editors with syntax highlighting, line numbers and code folding. Copy either one with a click.

  • Full URLs

    Relative addresses of images, fonts and links are turned into full URLs, so the code still works when you paste it elsewhere.

  • Fonts and variables

    Optionally include the page's @font-face rules, and mark CSS variables that the extracted code never uses.

  • Inherited styles

    Optionally add the text styles the element inherits from its parents, such as font and color, on a wrapper around the HTML.

  • Follows your selection

    The pane updates each time you select another element. Six switches control what's included, and your choices are remembered.

Private by design

Read the privacy policy

  • No account and no sign-up.
  • Works only inside DevTools, on the element you select.
  • Your settings are stored only in your browser. The code you extract isn't saved.
  • No analytics, no tracking and no ads. Nothing you extract is sent anywhere.

Everything is included

  • HTML and CSS of any element
  • Selector simplification
  • Live preview at three screen widths
  • Code editors with one-click copy
  • Six extraction settings, remembered between sessions