Holographic Foil Gradient: CSS Code & Colors

Q: What's the CSS code for the Holographic Foil gradient?

Use background: conic-gradient(from 315deg, #FF61D2 0%, #FE9090 25%, #FFD076 50%, #9DFFB0 75%, #67CFFF 100%);. RGBA and HSLA versions are also available on this page.

Holographic Foil Gradient

Five-color iridescent sweep, like shifting foil.

Customize this gradient →

Opens it in the generator: change the type or direction, adjust the colors, then copy the CSS or download.

Color Stops

#FF61D2

#FE9090

#FFD076

#9DFFB0

#67CFFF

Holographic Foil CSS Code

background: #FF61D2;
background: conic-gradient(from 315deg, #FF61D2 0%, #FE9090 25%, #FFD076 50%, #9DFFB0 75%, #67CFFF 100%);

background: rgba(255, 97, 210, 1.0);
background: conic-gradient(from 315deg, rgba(255, 97, 210, 1.0) 0%, rgba(254, 144, 144, 1.0) 25%, rgba(255, 208, 118, 1.0) 50%, rgba(157, 255, 176, 1.0) 75%, rgba(103, 207, 255, 1.0) 100%);

background: hsla(317, 100%, 69%, 1.0);
background: conic-gradient(from 315deg, hsla(317, 100%, 69%, 1.0) 0%, hsla(0, 98%, 78%, 1.0) 25%, hsla(39, 100%, 73%, 1.0) 50%, hsla(132, 100%, 81%, 1.0) 75%, hsla(199, 100%, 70%, 1.0) 100%);

background: #FF61D2;
background: conic-gradient(from 315deg, #FF61D2 0%, #FE9090 25%, #FFD076 50%, #9DFFB0 75%, #67CFFF 100%);
background: conic-gradient(from 315deg in oklch, oklch(73.07% 0.2252 340.6) 0%, oklch(77.08% 0.1332 20.6) 25%, oklch(88.03% 0.1207 82.32) 50%, oklch(91.96% 0.1423 149.17) 75%, oklch(81.1% 0.1177 230.59) 100%);

The same colors blended in OKLCH, so this one looks more vivid than the gradient above. Older browsers show the standard gradient. How OKLCH gradients work →

bg-[conic-gradient(from_315deg,#FF61D2_0%,#FE9090_25%,#FFD076_50%,#9DFFB0_75%,#67CFFF_100%)]

bg-[conic-gradient(from_315deg,#FF61D2_0%,#FE9090_25%,#FFD076_50%,#9DFFB0_75%,#67CFFF_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Holographic Foil gradient?