Ribbonlab Open the editor

How to add an animated 3D background in WordPress

Design a 3D ribbon in Ribbonlab and add it to any WordPress page with the Custom HTML block. No plugin needed.

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 WordPress, pick HTML and press Copy code.

2. Add it to WordPress

  1. Edit the page in the block editor and add a Custom HTML block where the ribbon should go.
  2. Paste the code. Use Preview in the block toolbar to see the ribbon.
  3. Update or publish the page.

The code is one iframe, 100% wide and as tall as the screen. Change height: 100vh in it to any height you want, for example height: 600px.

Behind the hero text

To layer text over the ribbon, put both inside a Group block and add this to Appearance, Additional CSS (or your theme's CSS), with the class ribbon-hero on the Group:

.ribbon-hero { position: relative; }
.ribbon-hero iframe { position: absolute; inset: 0; height: 100%; z-index: 0; pointer-events: none; }
.ribbon-hero > :not(.wp-block-html) { position: relative; z-index: 1; }

Page builders such as Elementor or Divi have an HTML widget that takes the same code.

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.