Holo Foil

Gradients
Interactive — move your cursor

Description

Holographic foil sheen — the angle-dependent rainbow of holo trading cards and credit-card foil. A brushed charcoal-metal base carries an ordered thin-film spectrum (soap-bubble pastels, not garish rainbow) lit through a fine foil-comb rib texture that sharpens in pooled light and melts into smooth satin in the shadows, dusted with micro-glitter that flares as the film phase drifts. The cursor IS the viewing angle: sweeping the mouse rolls the full spectral field across the surface like tilting a card, with a soft prismatic reveal and glint streak under the pointer. Idle, the sheen auto-drifts slowly under two sweeping studio light bars.

What is the holographic background?

Holo Foil is a free holographic background that renders in real time with WebGL, so it stays sharp on any screen without shipping a heavy video file or GIF — and it pauses while off-screen to keep pages fast.

Use it as visual inspiration for a hero or section background on a landing page, portfolio, SaaS site or app. Every parameter — colors, speed and intensity — is adjustable in the remix playground. No account is needed to preview it.

Make it yours

Every knob below is tuned by the AI to match your design — or ask for changes in plain language, like “slower and more blue.”

colorsPalette

Cyclic thin-film tint stops, traversed in order as the rainbow sequence and wrapping last back to first. Soft related pastels = physical soap-bubble iridescence; saturated neons = synthwave holo; near-monochrome stops = subtle duotone foil. Order controls which hues sit adjacent in the sheen.

bgPalette

The metal under the foil. Deep charcoal = moody premium card; graphite (#3a3d46) = bright silver foil; near-black = maximum spectral contrast. Light values wash the sheen toward white satin.

bg-alpha0–1

Backplate opacity. 1 = self-contained foil surface; 0 = only the iridescent sheen, glints and glitter float over the host section behind the canvas.

speed0.05–2

Idle drift rate of the sheen, light bars and rib shimmer. Higher = lively living foil, lower = near-still luxury object; the cursor roll feels the same at any speed.

scale0.5–6

Sheen frequency. Higher = more spectral cycles and a finer rib comb (busy, technical, sticker-like); lower = one broad cinematic rainbow sweep with wide silky ribs.

sharpness0–1

Band crest definition. Higher = crisp etched foil ridges with dark valleys (engraved card look); lower = soft diffuse satin gradients with barely-visible combing.

warp0–2

Organic undulation of the bands. 0 = perfectly straight machine-pressed foil lines; higher = liquid silk waves; very high = molten, almost marbled flow.

angle0–180

Direction of the foil bands in degrees. 55 = classic diagonal card tilt; 90 = vertical curtain; near 0/180 = horizontal strata. Pick to complement the page layout's diagonals.

grain0–1

Brushed-metal micro-streak strength on the base and inside the sheen. Higher = tactile anisotropic metal texture; lower = clean smooth vinyl-sleeve finish.

sparkle0–1

Micro-glitter density inside the lit foil. Glints flare as the film phase drifts or rolls under the cursor. Higher = festive holo-stardust card; 0 = pure smooth foil with no glitter.

intensity0–1.5

Overall iridescence strength over the metal. Higher = vivid saturated rainbow dominating the surface; lower = whisper of color on dark brushed metal, very restrained.

imageImage

optional https image rendered as the card art UNDER the foil (cover-fit) — the holographic sheen, glitter and cursor-driven spectrum roll over it like a holo trading card; leave empty for the brushed-metal base

mouse0–1

Cursor-as-viewing-angle strength. Higher = sweeping the pointer rolls the rainbow dramatically across the foil (like tilting a card) with a brighter prismatic reveal and glint streak; 0 = off, ambient drift only. Idle look is identical at any value.

Frequently asked questions

Yes. You can preview the holographic background for free in the AIDesigner effects library — no watermark and no sign-up required to try it.

Use "Remix this effect" to tune the colors, speed, and parameters, then use the preview as a reference for your website background implementation.

It renders on the GPU through WebGL at a capped frame rate, so it is far lighter than a background video and automatically stops drawing when it scrolls out of view — keeping load and battery impact low.

Yes. Every knob in the "Make it yours" section is adjustable, and you can also just ask the AI in plain language — for example "slower and more blue" — and it retunes the holographic background to match.

More effects

View all