How to paste HTML into Webflow

You have a section as HTML and CSS — written by hand, exported from another tool, or generated by Claude, ChatGPT or v0 — and you want it in Webflow. Here is what works and what doesn't.

Why you can't just paste HTML

Webflow has no "import HTML" button. If you paste raw code into the Designer, nothing happens. The only built-in way to use code is the Embed element, and it has three problems:

The section shows up as one opaque block. You can't select a heading or change a button color in the Style panel.
The CSS doesn't follow Webflow's breakpoints, so tablet and mobile views are whatever the code happened to do.
Nobody else on your team can edit it without touching code.

What you actually want is the same thing Webflow gives you when you copy elements from another Webflow project: native elements with real classes.

Convert it to Webflow's clipboard format

When you copy elements inside Webflow, the Designer puts a special payload on the clipboard: the element tree plus every class and its styles at each breakpoint. Paste that payload into any Webflow project and you get native elements.

The converter on this site produces exactly that payload from your HTML:

Paste your code. HTML with a <style> block, HTML plus a separate stylesheet, or Tailwind markup.
Convert. Your code is rendered in your browser. The final styles are read at Webflow's breakpoints (desktop, 991px, 767px and 478px) and turned into a small set of readable classes, including :hover and :focus states.
Copy and paste. Click Copy to Webflow, open the Designer, select where the section should go, and press ⌘V (or Ctrl+V).

Where to paste

Select an element before you paste. The pasted section is inserted inside or after the selected element, just like a normal Webflow paste. Selecting Body in the Navigator and pasting adds the section at the end of the page.

What doesn't become native

Some HTML has no native Webflow equivalent when pasted. These are kept as HTML Embeds, with their styles inlined so they still look right:

inline <svg> icons
<video>, <audio>, <iframe> and <table>

Forms are different: a <form> becomes a native Webflow Form Block, with real inputs, text areas, selects, checkboxes, radio buttons and a submit button, so Webflow can collect submissions. Set where submissions go in the form settings after pasting.

CSS keyframe animations aren't converted either; rebuild those with Webflow Interactions. The conversion report lists every item like this, so nothing disappears silently.

Tips for a cleaner result

Use semantic class names (hero, pricing-card) instead of generated ones. The converter keeps them, so your Webflow classes stay readable.
Add your fonts first. Webflow drops fonts your site doesn't have. See Add your fonts before pasting.
Convert one section at a time for very long pages. It's easier to place and review.