How to convert an HTML design to Webflow

At a glance

Can Webflow import HTML?

No. There is no HTML import in the Designer. It's an open request on the Webflow Wishlist.

Fastest editable route

A converter that writes Webflow's clipboard format. You paste with ⌘V (Ctrl+V).

What converts

Elements, classes, combo classes, media queries → breakpoints, :hover/:focus/:active → states, forms, Tailwind, simple GSAP → Interactions.

What stays code

Inline SVG, ::before/::after, keyframe animations and scripts that can't be mapped. They go into an Embed.

Works on

Every Webflow plan, including the free Starter plan.

Time per section

About 10 seconds to convert. Expect a few minutes of checks (fonts, images).

Why you can't just paste HTML into Webflow

Webflow doesn't store pages as HTML. Each element is a node in Webflow's own data model, and each style lives on a class with separate values per breakpoint (desktop, tablet, mobile landscape, mobile portrait) and per state (hover, focus, pressed). HTML and CSS describe the same design in a different shape: selectors that match many elements, the cascade, and media queries that can go mobile-first or desktop-first.

So the Designer has nowhere to put a raw stylesheet. The Code Embed element accepts code, but Webflow treats it as a closed box: you can't select what's inside, style it in the Style panel, or let a client edit its text. It also has a character limit, which a full page of CSS can exceed.

Converting means working out the final style of every element (what the browser would compute), then writing it the way Webflow stores it: one class per look, combo classes for variations, values per breakpoint and state. That is what FlowPaste does. FlowPaste reads the page the way your browser shows it: the elements, every CSS rule that applies to them, the media queries and the hover states. It then writes Webflow's own clipboard format, so ⌘V (Ctrl+V) in the Designer creates real elements with named classes.

“Regardless of where your site is hosted today, migrating to Webflow will be a rebuild, not a transfer.”

Webflow Help Center

Ways to do it, compared

Times for the rebuild are for a typical landing-page section set (hero, features, pricing, footer) by an experienced Webflow designer. Freelancer prices are what Fiverr and Contra listings charge for rebuilding AI-made sites in Webflow (October 2026).

How to convert HTML to Webflow with FlowPaste

Time: about 5 minutes for a page. You need: your HTML and CSS, the free FlowPaste Chrome extension, a Webflow site open in the Designer.

1. Get the code into one file

   Put the CSS in a <style> tag above the HTML and any JavaScript in a <script> tag below it. A full page works; one section at a time gives cleaner results and is easier to check.

   TipIf your CSS sits in separate files, Pro has separate CSS and JS fields. Or drop the whole project folder as a .zip.

2. Open the FlowPaste panel in the Designer

   Open your site in the Webflow Designer. Click the FlowPaste button at the bottom right (or press ⌥⇧F / Alt+Shift+F).

3. Paste the code and check the preview

   Paste into the Convert tab, open a file, or drop it. The preview shows desktop, tablet and mobile widths. React, JSX and pages that build themselves with JavaScript are rendered first, so you see the real design.

4. Choose options

   Leave "Match browser defaults" on so headings, margins and buttons look as they do in the browser (Webflow's base styles differ). Turn on Client-First names if your project uses that system.

5. Convert & copy

   Click Convert & copy (⌘ Enter / Ctrl Enter). The result card lists elements, classes, Interactions and notes that need your attention, such as fonts to add.

6. Paste on the canvas

   Click the element you want to paste into (or the Body) and press ⌘V (Ctrl+V). The section appears as native elements; its classes appear in the Style panel.

7. Check fonts, images and breakpoints

   Add any fonts the notes list, connect your site for image uploads, and click through the breakpoints. Then publish to your staging domain to check animations.

What comes across

A small example

A card with a hover state and one mobile rule. This is what you'd see in Webflow after pasting.

<style>
.card { padding: 32px; border-radius: 16px; background: #fff; }
.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.card.is-featured { background: #0f172a; color: #fff; }
@media (max-width: 767px) { .card { padding: 20px; } }
</style>
<div class="card is-featured">
  <h3 class="card-title">Pro</h3>
  <p class="card-price">$29</p>
</div>

Div Block   class: card + combo is-featured
  Desktop       padding 32px · radius 16px · bg white
  Hover         box-shadow 0 8px 24px
  Combo         bg #0f172a · color white
  Mobile (767)  padding 20px
  Heading H3    class: card-title
  Paragraph     class: card-price

Problems and fixes

After you paste

• Add the fonts in Webflow → Site settings → Fonts. FlowPaste lists them in the notes after each conversion. Until then, text that brought its own font file still shows correctly, but you can't pick the font in the Typography panel.
• Images: Webflow publishes images only from its own Assets. Connect your site once in FlowPaste → Account → Webflow images, and every paste uploads its images for you. Without it, images show in the Designer but break on the published site.
• Click through tablet, mobile landscape and mobile portrait in the Designer. Media queries are already mapped to those breakpoints; check anything the notes marked as "snapped".
• Rename or merge classes where you want your own system. Identical styles already share one class; variations are combo classes.
• Look for Embed elements (inline SVG icons, pseudo-elements, leftover scripts). They show on every plan; editing their code needs a paid site plan.
• Publish to your webflow.io staging domain and check animations and scripts there. Scroll-triggered Interactions don't always play inside Designer Preview.

Questions