CSS Gradient
Linear, radial and conic gradients with smooth OKLCH transitions. Export as CSS, SVG or image.
Open in editorGradients
Holographic Gradient
Iridescent foil backgrounds with shifting rainbow bands, folds and sheen. Export as PNG, JPG, WebP, SVG or GIF.
Open the generatorRuns right in your browser. Your graphics are made on your device.
Start from a preset
Pick a preset and it opens right in the editor, ready to adjust.
What is it?
A holographic gradient imitates iridescent foil: rainbow bands that bend and shift color where they cross, like a hologram sticker or a soap bubble. It is a popular trend look for album covers, packaging, Y2K designs and social posts.
What you can use it for
Covers and packaging
Holographic foil is a classic for album covers, cosmetics and limited editions. Here you get the look as a flat image without special printing.
Y2K and trend posts
Iridescent backgrounds give social posts, stories and event graphics the shiny Y2K look that stands out in a feed.
Website hero sections
As SVG the foil stays sharp at any width and loads fast. Place dark text on light foil for good contrast.
How it works
Pick your foil colors, then set the direction and how often the colors repeat. Ring layers add curved bands that cross the straight ones. Folds and sheen add light, grain adds a printed feel. Press Space for new variants and export as PNG, JPG, WebP, SVG or animated GIF.
Try the Holographic Gradient nowTips
- Light, saturated colors look most like real foil. Dark colors give an oil slick look instead.
- More repeats give narrow bands like a hologram sticker, fewer repeats give soft, wide color fields.
- The GIF export with new seeds makes the foil shimmer as if you were tilting it.
FAQ
- Is this a real hologram?
- No. It is a flat image that imitates the look of holographic foil with gradients and blend modes. For real foil you need special printing; the image works well as a print template or for screens.
- Why does the SVG not use filters?
- The look is built only from gradients and blend modes. That keeps the SVG small, renders the same in every size and avoids differences between browsers.
- Can I animate the foil?
- Yes. Export a GIF with new seeds or color cycling, and the bands move like foil catching the light.
- Does the export look like the preview?
- Yes. Preview and export use the same graphic, computed from the seed. The same settings and seed always give the same result.
Ready-made gradients
More than 30 original gradients with CSS to copy, each one ready to adjust in the editor.
Browse the gradient collectionRelated generators
All generators in Gradients
Mesh Gradient
Soft, flowing color gradients from several blurred color fields. Export as PNG, JPG, WebP, SVG or CSS.
Open in editor
Blurry Gradient
Dreamy backgrounds from large, strongly blurred color circles. Export as PNG, JPG, WebP, SVG or CSS.
Open in editor
Striped Gradient
Vertical stripes, each with its own gradient, slightly offset against each other. Export as PNG, JPG, WebP, SVG or CSS.
Open in editor
Shader Gradient
Liquid, silky and grainy gradients from a GPU shader. With domain warping, Bayer dithering, grain and vignette. PNG, JPG and WebP up to 8K, plus seamless GIF loops.
Open in editor
Glitch Background
Torn, shifted slices with RGB split, color blocks and scanlines, like a broken video signal. Export as PNG, JPG, WebP, SVG or GIF.
Open in editor