CSS Gradient
Linear, radial and conic gradients with smooth OKLCH transitions. Export as CSS, SVG or image.
Open in editorGradients
Liquid Chrome
Molten metal from a GPU shader: mercury, gold, black chrome or oil-slick rainbow with real reflections and highlights. PNG up to 8K, seamless GIF loop or live code for your website.
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?
Liquid chrome is the look of molten, mirror-like metal: soft folds that catch the light and reflect bright and dark bands. Musterli builds a flowing surface from noise, computes how light bounces off it and runs the reflection through your colors. That gives chrome, gold or rainbow metal without 3D software, right in your browser.
What you can use it for
Y2K and music artwork
Chrome surfaces are a staple of album covers, posters and fashion. Export them in square or story format and add type on top.
Product launches
A slowly flowing metal background behind a product shot feels premium. Paste it as a live embed into your landing page.
Wallpapers
Black chrome or soft silver works as a calm desktop or phone wallpaper, sharp up to 8K.
How it works
Pick two to six colors for the reflection and a highlight color. Frequency and flow shape the folds, relief makes them deeper, and reflections sets how many bright bands appear. Iridescence adds a rainbow shimmer like oil on water. Press Space for a new variant. Export PNG, JPG or WebP up to 8K, a seamless GIF loop, or live code for your website.
Try the Liquid Chrome nowTips
- Dark and light colors in alternation give the strongest chrome effect. A palette from black to white looks like real mirror metal.
- Low relief makes satin metal, high relief makes deep, glossy folds.
- Turn iridescence up and shine down for an oil-slick look; do the opposite for clean chrome.
FAQ
- Is this rendered in 3D?
- No. The shader computes a surface and its lighting for each pixel in 2D. That is much faster than a 3D scene, still looks like real reflections and runs in any current browser with WebGL2.
- Can I use it as a moving website background?
- Yes. In the export dialog, choose Web Component, React component or HTML embed. The metal flows live in the visitor's browser, pauses off screen and stands still for people who prefer reduced motion.
- Does the export look exactly like the preview?
- Yes. Preview and export run the same shader with the same values. Large exports up to 8K are rendered in tiles without visible seams.
- Can I use my brand colors?
- Yes. Apply a palette from your Brand Kit and the reflections run through your brand colors. Space then only changes the shape of the metal.
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
Holographic Gradient
Iridescent foil backgrounds with shifting rainbow bands, folds and sheen. Export as PNG, JPG, WebP, SVG or GIF.
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, seamless GIF loops and live code for your website.
Open in editor