Ribbonlab Open the editor

How to add an animated 3D background in Webflow

Design a 3D ribbon in Ribbonlab and place it behind your Webflow hero with a Code Embed element.

1. Make the ribbon

  1. Open Ribbonlab. Flip through the presets with ← → or start from the default ribbon.
  2. Tune it in the panel: shape, colors, texture, effects and motion. Drag the ribbon to turn it, scroll or pinch to zoom.
  3. Press Export (or E), choose Code, then pick what your site takes under Code for.
  4. Set Background to Hide to keep the ribbon see-through over your own section color, or Show to bring the background color along.

For Webflow, pick HTML and press Copy code. You get one iframe:

<iframe src="https://ribbonlab.ayurchenko.xyz/e/0.1.5/your-ribbon-id" title="Ribbon"
  style="display: block; width: 100%; height: 100vh; border: 0; color-scheme: normal"></iframe>

2. Add it to Webflow

  1. Open the Add panel and drag a Code Embed element into the hero section.
  2. Paste the code and save. If the Designer shows only a placeholder, check Preview or the published site.
  3. To put it behind the content, give the Code Embed position Absolute, set it to fill the section (all sides 0), and set the section to position Relative.
  4. Give the heading and buttons a higher z-index than the embed so they stay on top and clickable.
  5. Publish the site.

To sit the ribbon behind the hero text, give the section position: relative, put the ribbon first, and give it position: absolute; inset: 0; z-index: 0; pointer-events: none. Content that follows gets position: relative; z-index: 1, so buttons stay clickable.

A video background instead

Webflow's Background Video element takes an MP4. Export one from Ribbonlab with a seamless loop so it repeats without a jump.

Questions

Is it free?
Yes. Ribbonlab and the embed are free to use on any site, personal or commercial. No account, no sign-up.
Will it slow the page down?
The ribbon renders with WebGL on the visitor's GPU. It pauses while it is off screen and stays still for visitors who turn on reduced motion. The embed loads three.js (about 170 KB) from jsDelivr.
Can I change the ribbon later?
The code points to the ribbon you exported. Make your changes in Ribbonlab, export again and replace the code.
Can I use a video instead?
Yes. Export MP4, or WebM to keep transparency, and turn on a seamless loop so it repeats without a jump.