Holo Foil CSS gradient

Iridescent sticker sheen. 3 CSS layers on #F0EFF5, mixed with multiply and screen and overlay. Edit it in the studio below, then copy the code.

Gradient Studio couldn't load its presets.

It needs a live connection to CrunchCube. Check your internet connection and reload, or open the studio at crunchcube.in.

CSS gradients · blend modes · Tailwind · 40 presets

Holo Foil,
ready to paste.

Iridescent sticker sheen. 3 layers mixed with multiply and screen and overlay. Open it in the editor to tune each layer, then take the code as CSS, Tailwind, SVG or HTML.

Holo Foil CSS

.bg-holo-foil {
  background-color: #F0EFF5;
  background-image:
    linear-gradient(105deg, rgba(255, 179, 230, 0.75) 0%, rgba(179, 229, 255, 0.75) 33%, rgba(185, 255, 217, 0.75) 67%, rgba(255, 243, 179, 0.75) 100%),
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 45%),
    repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.28) 0px, rgba(255, 255, 255, 0.28) 3px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0) 26px);
  background-blend-mode: multiply, screen, overlay;
  background-size: cover;
}

Colours in Holo Foil

#F0EFF5#FFB3E6#B3E5FF#B9FFD9#FFF3B3#FFFFFF

Where to use it

Holo Foil is a prism gradient on a light base. Use it for hero sections, pricing cards and soft placeholders on light pages. Dark text reads well on top, but check contrast where the strongest colours sit.

New to layered gradients? Here's how the CSS works.

More prism gradients

Prism SplitWhite light broken into three bands
Chromatic EdgeRGB fringing along a diagonal
Spectrum FoldA folded band of full spectrum
Oil SlickPetrol film on wet asphalt
Neon RefractionHard neon through frosted glass

New games, tools and tutorials

About one short email a week. No spam, one-click unsubscribe.