ConvertexConversion
Conversion is the moment when Convertex takes your HTML/CSS code and transforms it into Webflow format. Here is how it works, what is supported, and what happens when something cannot be converted natively.
How Does It Work?
When you click Convert, Convertex does 5 things behind the scenes (in 1-2 seconds):
It Analyzes the CSS
Convertex reads your CSS, resolves variables, expands shorthands (like padding: 10px 20px into padding-top: 10px, padding-right: 20px, etc.), and identifies media queries to map them to Webflow breakpoints.
It Analyzes the HTML
Each HTML element is identified and converted to its Webflow equivalent. For example: <div> becomes Block, <h1> becomes Heading, <a> becomes Link, <img> becomes Image.
It Associates Styles with Elements
CSS styles are linked to the HTML elements that use them. Each element receives its styles organized by breakpoint: Desktop, Tablet, Mobile Landscape, Mobile Portrait.
It Builds the Result
Everything is assembled in the native format that Webflow understands: elements, classes, and styles per breakpoint.
It Makes the Result Available
The result is ready. Click Copy to copy it and paste it into Webflow.
You do not need to understand these technical steps. They happen automatically. What matters is the result: your code ends up in Webflow with the correct styles.
What Is Converted
Convertex supports the vast majority of common HTML and CSS properties:
| Category | Examples |
|---|---|
| HTML Elements | div, headings (h1-h6), paragraphs, links, images, lists, forms, video... |
| Layout | Flexbox, CSS Grid, positioning, float |
| Typography | Size, weight, style, line height, letter spacing |
| Colors | Solid colors, gradients, background images |
| Borders | Borders, rounded corners, shadows |
| CSS Animations | Transitions, transforms |
| Responsive | Media queries mapped to Webflow breakpoints |
| Pseudo-classes | :hover, :active, :focus, :visited |
| Webflow Components | Navbar, dropdown, forms, slider, tabs, lightbox, background video |
What Is Not Converted Natively
Some things cannot be directly translated into native Webflow properties:
| Element | Why | What Convertex Does |
|---|---|---|
| JavaScript | Webflow cannot import JS logic | Scripts are included as separate embeds |
| @keyframes Animations | Webflow has its own animation system | Included in a CSS embed (ghost block) -- they work directly, no need to recreate them with Webflow Interactions |
Complex Selectors (.parent .child, +, ~) | Webflow only accepts simple classes | Converted to ghost blocks |
Pseudo-elements (::before, ::after) | No native Webflow support | Converted to ghost blocks |
Some Pseudo-classes (:nth-child, ::placeholder) | No native Webflow support | Converted to ghost blocks |
WebGL, Three.js, Canvas, shaders, and advanced 3D effects are not supported by the converter. These technologies require a GPU rendering context that Webflow cannot reproduce natively. If your design relies on these effects, you will need to integrate them manually via a custom embed in Webflow after conversion.
What Are Ghost Blocks?
When CSS cannot be translated into a native Webflow property, Convertex creates a ghost block. It is a small invisible element that contains the CSS in an embed block.
In plain terms: instead of losing the style, Convertex "hides" it in a CSS embed that works exactly like a regular stylesheet. The visual result is identical.
Where to Find Them in Webflow
After pasting, ghost blocks appear as Embed elements in the Webflow Navigator. You can double-click on them to view and edit the CSS.
Is This a Problem?
No. Ghost blocks work perfectly on the published site. It is an elegant technical solution to ensure your design stays faithful to the original.
Ghost blocks are a feature, not a flaw. Without them, any CSS not supported by Webflow would simply be lost. They guarantee the visual fidelity of your design.
Result Fidelity
- Layout and spacing: very faithful. Margins, paddings, and sizes are precisely converted.
- Typography: faithful. All font properties are mapped to the Webflow style system.
- Colors and backgrounds: faithful. Including gradients and background images.
- Responsive: faithful. Media queries are mapped to Webflow's 4 breakpoints.
- Interactions and animations: to be recreated in Webflow. This is the main potential difference.
Always paste into a test page first. Compare the result in Webflow with the Convertex preview to verify fidelity before using the content in production.