Export to HTML + CSS

HTML + CSS is the plain, framework-free export: the markup of the section plus a stylesheet made only of the rules the author wrote. It’s the format to use for a static page, a prototype or any stack that isn’t on the list, and it’s the one you can use on Free.

How to copy the HTML and CSS of a section

Only the CSS the author wrote

Most tools copy the values the browser computed: hundreds of resolved pixels and no breakpoints. Pickode parses the original stylesheets instead, including cross-origin ones and @import, and resolves the cascade (!important, specificity, order) the way the browser does. Shorthands stay shorthands.

Kept	How
@media, @supports, @container	Every rule, as written
States	:hover, :focus, :focus-visible, :focus-within, :active, also on ancestors (e.g. .card:hover .title)
Pseudo-elements	::before and ::after
Nested CSS	Kept
Variables	var() resolved to the site’s value
Inherited properties	Properties inherited from ancestors are set on the root of the export
URLs	Relative URLs made absolute

Left out	Why
Computed values and browser defaults	They aren’t part of the author’s CSS
Universal resets (* rules)	They would restyle your whole page

Isolated preview

Before copying, the export opens in an isolated page so you see the code on its own, not on top of the original site. Switch between 375, 768, 1024 and 1280 px, or use device frames, to check that the breakpoints came across.

Free and Pro

Limits

Related

• Export to React
• Export to Tailwind
• Inspector