Mint Fog

Mint Fog is the lightest gradient in the catalog, moving from pale cyan to a slightly deeper mint. It is best used as a surface treatment rather than a full-screen hero: pricing table backgrounds, section dividers, empty states, and floating cards all take it well. Because it stays close to white, it does not fight the text hierarchy the way vivid gradients can.

Dark text works across nearly the whole ramp, which is rare for a gradient and useful in practice. Use it behind a featured panel and keep borders in a complementary pale blue-gray. The vertical 180 degree direction makes it read as atmospheric light from top to bottom; it is subtle enough that you can pair it with a stronger accent color elsewhere on the page without the two competing.

The light value is what makes this gradient forgiving with dark text, so it works in interfaces where a colored hero feels too loud. Use it behind a pricing column to single out the featured plan, or behind a testimonial block to lift it off a white page. Because the surface sits close to white, borders still need an explicit color, and a pale blue-gray beats pure gray next to the mint. Copy the CSS token and the top-to-bottom direction keeps the sweep reading as natural light.