MENU ASSETS

Gradient Background WebGL Animations

These WebGL gradient animations are created using the Vanta JS library, which includes three.js.
To customize the colors and effects, visit this page and paste the code into the Supa Code Block element: https://www.vantajs.com/?effect=fog

Two scripts are loaded from a CDN: three.min.js and vanta.fog.min.js (see the HTML code in the Supa Code Block).
You can also copy these scripts and host them on your own server if you’d like to run the animation locally.

Gradient Background WebGL Animation #1

Gradient background webgl animation showcasing vibrant colors and dynamic visual effects for engaging website designs.

Full section background

This is a basic text element.

TRY THE DEMO HERE

Gradient Background WebGL Animation #2

Full section with gradient overlay

This is a basic text element.

TRY THE DEMO HERE

Smooth gradient background for WebGL animation showcasing vibrant colors and modern design for WordPress websites.

Gradient Background WebGL Animation #3

Gradient background with radial overlay for web design, featuring smooth animation and modern aesthetic. Perfect for creative projects and UI backgrounds.

Radial gradient overlay

This is a basic text element.

TRY THE DEMO HERE

Gradient Background WebGL Animations

Gradient Background WebGL Animation #1

Full section background

Gradient Background WebGL Animation #2

Full section with gradient overlay

Gradient Background WebGL Animation #3

Radial gradient overlay

Gradient Background WebGL Animation #4

In small Divs

Gradient
Background
WEBGL
Animation #3

Gradient
Background
WEBGL
Animation #3

Gradient
Background
WEBGL
Animation #3

Gradient Background WebGL Animations

Gradient Background WebGL Animation #1

Full section background

Gradient Background WebGL Animation #2

Full section with gradient overlay

Gradient Background WebGL Animation #3

Radial gradient overlay

Gradient Background WebGL Animation #4

In small Divs

GradientBackgroundWEBGLAnimation #3

GradientBackgroundWEBGLAnimation #3

GradientBackgroundWEBGLAnimation #3

Rolling Counter Animation

Random Grid Fade on Scroll

Parallax Sliders

Gradual Blur effect

Fancy GSAP Marquee

Interactive Slide Navigation on hover

Interactive Galleries with Animated Captions

3D Scrolling Stripe Effect

Spotlight on Hover

3D Half-Flip on Scroll

Animated Grid Background with Ripple Effect

Random Shuffle Slideshow with View-Triggered Animations

Split-section Sliding Animations

Floating Image on Hover

Curtain Reveal Effect

Interactive Image Display on Link Hover

Text Scroll Reveal

Gooey Text Background

Dynamic 3D Flip Showcase

Magnetic Mouse Effect on Buttons

Scrambled Links On Hover

Scroll-Based Pinned Stack Effects

Gradient Background WebGL Animations

Automatic Split Text Animations

Clever Card Animations

Animated RGB Split Effect on Text

Creative Shape-outside Designs

Squircle Effect

Fancy Full Bleed layouts

Random Loop Animation

Synchronized Sliders

Fancy Animated Headers

Animated Highlighted Words

Animated Gallery

Falling Snowflakes

Autoplay Tabs

Liquid Buttons

Made With Breakdance AI logos

Sliders with images of various sizes

Fancy Shaped Galleries

Animated Background Text Gradient

Animated Text Path

Thumbnail Sliders

Sparkles Text Effect

Ripple Effect on Buttons

Infinite Horizontal Scrolling

Infinite Vertical Scrolling

Parallax Effect on Mouse Position

Split Text Animations

3D Rotating Banners on Scroll

Dark Mode Toggles

Fancy Sliders

Perspective Effect On Scroll

Fancy 3D looping animation

3D Elements

Hover Effects with the Supabox element

Underline On Scroll

Animated Buttons with icons

Animated Reveal Effect

Dynamic Content Ticker

Vertical Sliders

Animated Speech Bubbles

Animated Headings

Fancy Slider Paginations

Logo Showcase

Seamless Transparent Patterns

Gradient
Background
WEBGL
Animation #3

Gradient
Background
WEBGL
Animation #3

Gradient
Background
WEBGL
Animation #3