Chrome Gradient Generator

A chrome gradient is a gradient that simulates the look of polished or brushed metal. Two visual qualities define it: anisotropic reflections (the highlights align to a directional grain, which is what gives brushed metal its streaky look), and a wide colour range from cool steel through warm gold and copper through full holographic iridescence. Together these produce the visual effect of light catching a real metal surface, not just a colourful gradient with reflections painted on top.

The Gradients.design chrome generator renders this with real WebGL shaders. The reflection math is computed per-pixel using surface normals, so the result holds up at any export resolution and reads as authentic metal rather than as a filter applied to a flat gradient.

Chrome aesthetics had their first peak from 1999 to 2003: liquid metal logos, holographic product packaging, every car commercial featuring rotating chrome type. The look went out of fashion for nearly two decades and is now returning as the dominant aesthetic in:

• Album art. Hyperpop, electronic, and Y2K-revival artists from Charli XCX to PinkPantheress have built their visual identity around chrome and holographic gradients.
• App icon design. A wave of consumer apps launched in 2024 to 2026 with chrome icon backgrounds: Linear, Arc Browser, Notion AI, Raycast.
• NFT and digital art. Chrome-on-3D-surface is one of the most-traded styles on OpenSea and Foundation.
• Fashion and editorial. Print magazines and luxury fashion brands picked up chrome aesthetics in the 2024 to 2025 Spring-Summer cycle and have not let go.
• Brand identity for AI products. Chrome plus iridescence signals premium and futuristic, which is exactly what AI brands want to suggest.

If your brand is targeting a 2026 audience, chrome aesthetics are a reliable visual shorthand for premium pricing and forward-looking positioning.

1. Open the chrome editor. Visit the free chrome gradient generator. The canvas opens with a default mirror-chrome surface.
2. Pick a metal preset. Start from steel, gold, copper, holographic, or rose chrome. Each preset tunes the tint, roughness, and reflection sharpness.
3. Adjust surface roughness and grain. Slide between mirror finish (sharp reflections) and brushed metal (diffused highlights). Rotate the grain direction.
4. Export. Export as PNG up to 8K, MP4 video on Pro plans, or React component for live embedding.

True chrome reflections require WebGL. But for simple Y2K text effects, CSS conic-gradient comes close:

.chrome-text {
  background: conic-gradient(
    from 180deg at 50% 50%,
    #6b7280, #f3f4f6, #9ca3af, #ffffff, #6b7280
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  font-size: 8rem;
}

The conic gradient cycles through grey tones to simulate the streaky reflections of brushed chrome. Use background-clip: text to apply the gradient as a text fill. Works in every modern browser; renders cheaply.

For more elaborate effects (holographic shifts, mirror reflections, sculpted curvature), export a PNG from the studio. CSS cannot replicate real WebGL chrome cheaply, and the studios export captures the look in a way you can drop into any project.

The studio ships five major chrome presets, each tuned to a recognisable metal:

• Steel. Cool blue-grey, sharp mirror finish. The classic Y2K chrome look.
• Gold. Warm yellow-orange tint with deep contrast. Reads as luxury and premium pricing.
• Copper. Rose-orange tones, slightly oxidised feel. Used by fashion and lifestyle brands.
• Holographic. Full-spectrum iridescent, with prismatic colour shifts. The dominant 2025 to 2026 aesthetic.
• Rose chrome. Pink-gold tints, softer than gold. Pairs especially well with consumer products targeted at younger demographics.

Each preset is fully editable: change the tint, the reflection sharpness, or the brush direction without losing the underlying physics.

• PNG. Up to 8K on Studio. Crisp at any size; use WebP compression for web delivery.
• Alpha-channel PNG. Paid plans only. Transparent background for compositing over arbitrary surfaces.
• MP4 / WebM video. Pro for 1080p, Studio for 4K. Captures the slow chrome flow animation.
• React component. Self-contained TypeScript file; embeds the live shader in your app.

The most common use of chrome gradients is filling type. Three approaches, ranked by effort:

CSS background-clip (easiest)

.chrome-headline {
  background-image: url('/chrome-export.png');
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: cover;
  font-weight: 900;
  font-size: clamp(48px, 8vw, 120px);
}

SVG with image mask

<svg viewBox="0 0 800 200">
  <defs>
    <pattern id="chrome" patternUnits="userSpaceOnUse" width="800" height="200">
      <image href="/chrome-export.png" width="800" height="200" />
    </pattern>
  </defs>
  <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle"
        fill="url(#chrome)" font-size="120" font-weight="900">
    CHROME
  </text>
</svg>

Photoshop / Figma layer fill (most control)

Export the chrome PNG, drag into Photoshop or Figma, set as a layer fill on your type with appropriate blend mode (Multiply, Screen, or Linear Light depending on the look). This gives the finest control and pairs well with adding extra details (shadows, glows, outlines) on top.

• Charli XCX: the Brat era visual identity uses chrome and holographic type treatments throughout.
• Arc Browser: app icon, marketing pages, and onboarding flows feature liquid-chrome details.
• Raycast: pro plan upgrade screens use holographic chrome accents on plan tier cards.
• PinkPantheress: album art and tour merchandise leans heavily on chrome and Y2K aesthetics.
• Mistral AI: the homepage uses chrome accents on product names.
• Linear: subtle chrome highlights on the pricing page.

1. Using a Photoshop filter and calling it chrome. Filters paint highlights onto a flat colour; real chrome needs anisotropic shader rendering. The difference is visible at large sizes.
2. Pure-white highlights. Real chrome has slightly tinted highlights (cool blue for steel, warm yellow for gold). Pure white reads as a fake gradient.
3. Too much saturation. Holographic chrome works because the iridescence is subtle. Push it too far and the result looks like a 2008 video game intro.
4. Ignoring the brush direction. Horizontal brushed reads as polished. Diagonal brushed reads as industrial. Pick to match the rest of your design.
5. Animating too fast. The chrome flow should be slow, almost imperceptible. Fast chrome animation looks like a screensaver.