I have HTML/CSS to convert

You have HTML/CSS code ready (a purchased template, a CodePen, code sent by a developer) and you want to transform it into native Webflow elements. This guide walks you through it step by step.

Prerequisites: a Convertex account.

Where does your code come from?

The method is the same regardless of where the code comes from. Here are the most common sources:

Source	How to get the code
HTML template	Open the `.html` and `.css` files from the template
CodePen	Click the HTML and CSS tabs to copy the code
GitHub	Open the files and click "Raw" to copy
A developer	Ask them for separate HTML and CSS files
ChatGPT / other AI	Copy the generated HTML and CSS code

The code doesn't need to be perfect. Convertex handles most standard HTML/CSS structures. No need for <html>, <head>, or <body>. Fragments work just fine.

The steps

Clean the code with Claude

Before converting, pass your code through Claude with the Convertex skill to clean and optimize it. Open a conversation with Claude and say:

"With Convertex, here is some HTML/CSS to clean up for a Webflow conversion. Simplify the classes, remove unnecessary code, and make sure everything is compatible. [paste your code]"

Claude will restructure the code, remove superfluous elements, simplify CSS selectors, and make sure everything is ready for a clean conversion.

This step is optional but strongly recommended. Cleaned code produces a much cleaner result in Webflow, with clear classes and fewer ghost blocks.

Paste the HTML

Click the HTML tab in the left panel and paste the HTML code cleaned by Claude (or your original code).

Paste the CSS

Click the CSS tab and paste your CSS code.

If your CSS is in the same file as the HTML (between <style> tags), paste everything in the HTML tab. Convertex will automatically separate the HTML from the CSS.

Check the preview

The right panel shows a real-time preview. Verify that the design looks like what you expect.

Use the breakpoint buttons (Desktop, Tablet, Mobile) at the top of the preview to check the responsive behavior.

Check scripts (if needed)

If your design uses animations or effects (carousel, scroll animation, etc.), open the Scripts Panel in the top bar.

Convertex automatically detects common JavaScript libraries (Swiper, GSAP, AOS, etc.) and includes them in the conversion. Verify that the correct scripts are enabled.

Convert

Click Convert (or Cmd+Enter). The conversion takes 1 to 2 seconds.

Copy and paste into Webflow

Click Copy (or Cmd+K), then paste into Webflow Designer.

Tips for better results

If the code is very long

For templates with many sections, convert section by section rather than all at once. The result will be cleaner.

Copy the HTML of a single section (for example, just the hero)
Copy the corresponding CSS
Convert and paste into Webflow
Repeat for each section

If fonts don't match

Custom fonts must be added to your Webflow project separately:

In Webflow, go to Project Settings > Fonts
Add the same font used in the code
The converted result will then use the correct font

If the code uses complex selectors

Some CSS selectors don't translate directly into native Webflow properties (like .parent .child or ::before). Convertex then creates ghost blocks: small invisible CSS embed blocks that apply these styles.

This is normal and works perfectly on the published site.

Common issues

Problem	Solution
The preview is empty	Check that the HTML code contains visible elements (not just comments)
Colors are different	Check that the CSS contains the color declarations. Some templates depend on CSS variables that may need to be copied as well
The layout is broken	Check that you copied all the required CSS, not just a part
Images don't display	Local images (`src="images/photo.jpg"`) won't work. Use absolute URLs or replace them after pasting into Webflow

What's next

The editor in detail: discover all the editor features
External scripts: how to manage JavaScript libraries
Adding to an existing Webflow project: integrate without breaking what already exists