3D Interactive Background Spline

Here's a demonstration of a spinning 3D sphere in Webflow via Three.js and wEBGL

Cards 2 is an amazing UI kit and framework to allow you to quickly design and wireframe your next landing page using Webflow. There are over 100+ different prebuilt symbols and components included for hi-fidelity wireframing for any UI/UX designers. Create landing pages and designs faster with the Cards 2.0 UI kit directly in Webflow and ready to be published directly with code. This UI kit includes 50 new cards as Webflow components/symbols in both dark and light variations. 3 complete landing page designs in both dark and light. Symbols/components for both hero sections, features, testimonials, team, pricing pages, blog posts and more. These are responsive for all 4 breakpoints and all cards are offered in a Sketch file. This UI kit allows you to build your designs faster and begin the design process directly in Webflow.

A unique interactive glassmorphism that follows the mouse cursor on the Webflow site. This dynamic glassmorphism Webflow technique is a great way to add 3d transform effects to your site.

A 3D rotating cube that can be customized with images or videos, which can add a nice dynamic level for your features section. The effects are achieved via Webflows native interactions and transforms.

Add interactive 3D particles and a 3D spinning object to your Webflow site.

A full page background video hero section design in Webflow. An easy way to integrate a background video hero section in your Webflow projects with unique button interactions, and a scroll indicator.

A unique 3D glassmorphism interaction and animation that utilizes a combination of video, Webflow interactions and Custom CSS. When a user hovers over a card the card rotates and 3D transforms based on Webflow interactions. The technique for the glassmorphism is powered by custom CSS using backdrop-filter blur and image masking. In order for this to work properly you will need to add the custom CSS code with this cloneable. Pay attention to the Webflow interaction that is powering the cards 3D transform techniques. An excellent example of using Webflow interactions, CSS and a little bit of creativity to create glassmorphism 3D cards in Webflow.

A fun example of how to utilize native div shapes to create ultra gradients in Webflow. In this example the author creates unique gradients via Webflow by creating colored blobs and utilizing a number of different effects to create a gradient style background for your Webflow site. This utilizes a combination of border radius, 2d & 3d transforms and other effects to allow you to create gradients without 3rd party images or CSS gradient classes. Add in native Webflow interactions and you can build Stripe like animated gradients in no time.

A demonstration of using Spline to create an interactive and embeddable 3D background. This interaction will not appear on the project preview and you'll need to visit the actual page to learn more about this technique.