Free during beta · No sign-up
HTML to Webflow, in one paste
Paste HTML, CSS or Tailwind from Claude, v0, Cursor or your own project. Get native Webflow elements with real classes, hover states and responsive breakpoints — not a code embed.
Runs in your browser. Your code is never uploaded.Get the Chrome extension →
How it works
- 1
Paste your code
Paste HTML with a <style> block, add separate CSS, or paste Tailwind markup. A whole page or a single section both work.
- 2
Convert and preview
We render your code in your browser, read the final styles at Webflow's four breakpoints, and rebuild them as clean, reusable classes. Compare the original and the result side by side.
- 3
Paste into Webflow
Click Copy to Webflow, open the Webflow Designer, select where the section should go and press ⌘V (Ctrl+V on Windows). You get native elements you can edit in the Style panel.
Native elements, not an embed
Sections, divs, headings, paragraphs, links, link blocks, lists and images come through as real Webflow elements. You can select them in the Navigator and edit every property in the Style panel.
Responsive out of the box
Media queries become Webflow's Tablet, Mobile landscape and Mobile portrait styles. Grid and flex layouts, gaps and max-widths are kept as written, not frozen into fixed pixels.
Hover and focus states
:hover and :focus rules are converted into the matching Webflow states, together with their transitions.
Tailwind support
Utility classes are compiled and merged into a small set of readable classes, so a Tailwind section doesn't turn into hundreds of one-off styles.
Chrome extension
Skip the ⌘V. Insert with one click.
- Insert sections straight into the Webflow Designer
- Capture a section from any page you’re viewing
- Keep recent conversions one click away