HTML to Webflow examples
Copy a section and paste it into the Webflow Designer. Each example becomes native elements with classes, breakpoints and interactions. Use them as a start, or to see what FlowPaste does with your own code.
Hero: centered with fade-up animation
Centered headline, text and 2 buttons. GSAP fades each part in.
- GSAP → Interactions
- Responsive
Logo cloud
A row of customer logos under a short caption.
Footer: simple centered
A small footer with links and a copyright line.
Navbar: mobile menu with JavaScript
A hamburger button opens the menu on mobile. The lines change to an X.
- JavaScript
- Responsive
- Hover states
Hero: GSAP timeline with stagger
A GSAP timeline shows the badge, title, text and a chart, one after the other.
- GSAP → Interactions
- Responsive
- Hover states
Features: reveal on scroll
6 feature cards. ScrollTrigger shows them one by one when they come into view.
- GSAP → Interactions
- Responsive
- Hover states
Newsletter: inline signup form
An email field and a Subscribe button. FlowPaste makes a native Webflow form.
- Native form
- Responsive
- Hover states
Contact: form with details
Name, email, company and message fields next to contact details.
- Native form
- Responsive
- Hover states
Pricing: monthly / yearly switch
A switch changes the prices of 2 plans from monthly to yearly.
- JavaScript
- Responsive
- Hover states
Logos: infinite marquee
Logos move from right to left without end. The row stops when you hover it.
- Responsive
- Hover states
Code window with syntax colors
A code editor window with colored code and a blinking cursor.
- Responsive
- Hover states
Cards: mouse spotlight
A light follows the mouse pointer over each card.
- JavaScript
- Responsive
- Hover states
How to paste an example
- Find an example. Click Preview to see it at desktop, tablet and mobile width.
- Click Copy for Webflow.
- Open your page in the Webflow Designer. Select the element that the section goes after.
- Press ⌘V or Ctrl+V. Webflow adds the section with its classes, breakpoints and interactions.
What you receive in Webflow
- Native elements: sections, divs, headings, text, links, buttons, images and lists.
- A named class on each element, and combo classes for variations.
- Tablet and mobile breakpoints, and hover, focus and pressed states.
- Native Webflow forms with fields, labels and a submit button.
- GSAP animations as Webflow Interactions.
- A small Embed only for CSS or scripts that Webflow cannot express.
Questions
Are these examples free?
Yes. All 30 examples are free. You do not need an account or the extension to copy them. You can use them on client sites and on your own sites.
Do the examples paste as native Webflow elements?
Yes. Each example pastes as native elements with named classes, tablet and mobile breakpoints and hover states. Forms paste as native Webflow forms. GSAP animations paste as Webflow Interactions. CSS that Webflow cannot express, for example pseudo-elements and keyframes, stays in a small Embed element.
Do I need a paid Webflow plan?
No. You can paste the examples on all Webflow plans. Some examples include an Embed element for custom code. To edit an Embed, you must have a paid Webflow site plan.
What about the JavaScript in some examples?
Interactive examples, for example the mobile menu and the pricing switch, keep their script in an Embed. The script runs on your published site. The Designer does not run scripts, so in the Designer you see the first state of the section.
Can I convert my own HTML the same way?
Yes. Use the free HTML to Webflow converter for small sections. For more sections, install the FlowPaste Chrome extension. The extension converts code inside the Designer and captures sections from live websites.
Paste your own code
Code from ChatGPT, Claude, v0 or your own project converts the same way. Install the free extension to convert code inside the Designer.