Export HTML & CSS

Copy HTML and CSS of any element on a website

You spot a pricing table, a card or a navigation bar you like, and you want to see how it is built. Opening DevTools and copying styles rule by rule takes ages, and the result rarely looks right once you paste it somewhere else. Export HTML & CSS lets you copy HTML and CSS of any element in one click: point at it, click it, and you get code that reproduces it.

Code you can actually read

The export is not a dump of every computed property. DevToolkit keeps only the styles that change how the element looks and leaves out what the browser does by default. Where it can, it writes values the way a person would, such as auto, 50% or repeat(2, 1fr), instead of fixed pixels. Repeated styles are grouped into shared classes, shorthands are folded together, and ::before and ::after pseudo-elements get their own rules.

Checked against the original

Before you see the code, DevToolkit draws the copy next to the page and measures every box against the original. Where a size does not match, it adds the width or height needed to fix it. That check is why the exported element looks like the one on the page, not a rough approximation of it.

Handles the awkward parts

Modern sites are full of things that break simple copy tools. The exporter flattens open shadow DOM and web components into plain HTML, replaces SVG sprite references with the actual shapes, turns canvas drawings into images, wraps table rows in the table tags HTML needs, and makes every image and link address absolute so they still load after you move the code.

Use it your way

Choose CSS with classes, or inline styles if you are pasting into an email template or a page builder. Copy the HTML and CSS separately, download a complete HTML file, or send the element to CodePen in one click to start experimenting.

Good to know

The export captures how the element looks at that moment. Hover effects, animations and media queries from the original stylesheet are not included, fonts are listed so you can add them yourself, and embedded frames keep only their address. Exports are limited to 2,000 elements to keep them fast. The code is made in your browser. It is only sent to CodePen when you press the CodePen button.