So nutzt du: HTML & CSS to Webflow
- Paste your HTML on the left and the matching CSS on the right — from a code export, a template, Tailwind output compiled to CSS, or code written by ChatGPT or Claude.
<style>tags inside the HTML are picked up automatically. - Check the preview and the conversion report: it shows how many elements, classes, combo classes and breakpoint styles were created, and which CSS couldn’t be mapped.
- Choose Native elements (Div Block, Heading, Paragraph, Link, Image, List…) or Custom Elements (every tag exactly as written), then click Copy to Webflow.
- In the Webflow Designer select a parent element and press Ctrl/⌘+V. Classes appear in the Style Manager, tablet and mobile styles on their breakpoints.
Why convert HTML to native Webflow elements?
The quick way to get code into Webflow is a Code Embed — but an embed is a black box: clients can’t edit the text, you can’t restyle it in the Style panel, and it doesn’t show up in the Navigator. This converter turns your markup into the same elements you’d build by hand: Div Blocks, Sections, Headings, Paragraphs, Text Links, Link Blocks, Images and Lists, each with its classes. Text stays editable in the Designer and in the Editor, and every style lives in Webflow’s Style Manager.
How CSS is mapped to Webflow classes
| Your CSS | In Webflow |
|---|---|
.card { … } | Class card with those styles |
class="button is-secondary" + .button.is-secondary | Combo class button is-secondary |
@media (max-width: 991px) | Tablet breakpoint |
@media (max-width: 767px) / 479px | Mobile landscape / Mobile portrait |
.button:hover, :focus, :active | Hover, Focused and Pressed states |
var(--brand) from :root | Resolved to its value |
margin: 0 auto, gap, border, flex: 1 | Expanded to Webflow’s individual properties |
h1 { }, .card p { }, @keyframes | Kept in a small Code Embed (<style>) — Webflow classes can’t express tag or descendant selectors |
Mobile-first CSS works too: the converter calculates the effective styles for each Webflow breakpoint (desktop, tablet, mobile landscape, mobile portrait) and writes only the differences, the way Webflow cascades from desktop down.
Native elements vs Custom Elements
Native elements give the best editing experience for content: headings, paragraphs and links behave exactly like elements dragged from the Add panel. Tags without a native Webflow equivalent — button, form, input, video, inline svg and so on — become Custom Elements with all their attributes. Choose Custom Elements (exact tags) if you want every tag preserved 1:1, for example for semantic markup or components you’ll never edit in the Editor. Inline SVG icons work best with the dedicated SVG to Webflow tool.
Where the HTML comes from
- AI-generated sections — ask ChatGPT or Claude for a section in HTML and CSS with class names, then paste it here instead of rebuilding it by hand.
- Templates and UI kits — HTML/CSS templates or exported prototypes.
- Tailwind — Tailwind utility classes don’t translate well to Webflow classes; compile to plain CSS with semantic class names first, or let the Class Name Generator give you a clean structure.
- Old websites — copy the markup of a section and its CSS to migrate it into Webflow.
Tips for a clean paste
- Use a naming system — for example Client-First — before pasting. The Class Name Typo Checker finds typos and duplicates in your classes.
- Images keep their URL. Upload them to Webflow’s Assets panel afterwards and swap the source, so they’re served from Webflow’s CDN with responsive sizes.
- If a class with the same name already exists in your project, Webflow keeps both and adds a number to the pasted one — rename or merge them in the Style Manager.
- Convert fixed spacing into fluid values with the Clamp Calculator, and design values from Figma with Figma CSS to Webflow.
How “Copy to Webflow” works
When you copy elements inside the Designer, Webflow places a JSON description of the elements and their classes on the clipboard. The converter builds the same data — nodes, text, classes, combo classes and breakpoint variants — and puts it on your clipboard so the Designer can read it. Webflow doesn’t officially document this format. If a paste ever fails after a Webflow update, use the calibration box on the SVG to Webflow page once; the Custom Elements created here use the same learned format.
Auch gesucht als: html to webflow, css to webflow, code to webflow, paste html into webflow, webflow clipboard, xscpdata, html to webflow converter, tailwind to webflow.
Passende Tools zu: HTML & CSS to Webflow
- HTML to Webflow Rich Text — Paste messy HTML — from an old site, WordPress export, Google Docs or Word — and get clean semantic markup that Webflow’s Rich Text element and CMS import accept without junk.
- WordPress to Webflow Redirects — Moving a site from WordPress to Webflow changes almost every URL: dated blog paths, /category/ archives, trailing slashes and page slugs.
- Webflow Clipboard Bridge — Webflow puts elements on the clipboard in a special format that doesn’t travel between browsers (Firefox → Chrome, Safari → Edge…).
- Webflow Component Editor — Move sections and components between Webflow projects and change them on the way.
Häufige Fragen
Can I paste HTML directly into Webflow?
Does it keep responsive styles and hover effects?
max-width media queries map to Webflow’s tablet (991px), mobile landscape (767px) and mobile portrait (479px) breakpoints, and :hover, :focus and :active become Hover, Focused and Pressed states. Min-width (mobile-first) CSS is recalculated for each breakpoint.What happens to CSS that isn’t a simple class selector?
h1), descendant selectors (.card p), @keyframes, @font-face and similar can’t be stored as Webflow classes. By default they’re placed in a small Code Embed with a <style> tag inside the pasted section, so the design still looks right. Untick the option to drop them.Does it work with Tailwind or Bootstrap HTML?
px-4 or col-md-6) would become a Webflow class without styles unless you paste the matching CSS. For Webflow it’s much better to use a few semantic classes; compile your design to plain CSS or start from the Class Name Generator.