Mint green gradient: fresh, light codes

A mint green gradient blends pale, slightly blue greens from almost white to a soft spearmint, and few greens feel fresher. Kept warm with a cream or peach partner, it feels like a café, a garden or a spring morning. Paired with grey and pure white, it starts to feel like a dentist's waiting room. Here are mint codes that stay fresh, the partners that warm them up and the text colour that keeps them readable.

A mint green gradient in one line of CSS

If you only need one, start here. It runs from a warm, creamy white to a clear mint, so it never feels cold, and it leaves plenty of calm space at the top for words.

Pale mint gradients

These live close to white. They are perfect for backgrounds that carry a lot of reading, like a menu or a price list, and for product shots where you want the packaging to be the hero. Pastel gradients has the same approach for every colour.

Decide early which way your mint leans. Blue leaning mints feel cool, clean and modern, which suits tech, swimwear and skincare. Yellow leaning mints feel warm and edible, which suits food, plants and anything for children. Mixing the two in one gradient is fine, but choose one to dominate, so the brand has a clear temperature.

Mint with peach, cream or blush

Mint's opposite on the colour wheel is a soft coral pink. At full strength, opposites blend into grey, but at pastel strength there is so little saturation that they pass through each other cleanly. That makes mint and peach, or mint and blush, one of the prettiest combinations available, and the warmth stops mint feeling medical. More combinations live in gradient colour combinations.

Mint that doesn't look like toothpaste

Many people connect mint with toothpaste, clinics and hospital scrubs. If you are not in those industries, steer away from the combinations that signal them.

Grain matters more than you'd think here. A pale digital gradient with no texture looks like a default; a little noise makes it look like a printed menu card. Grainy gradients shows how.

Deeper mint gradients: into emerald and forest

Running mint down into emerald or forest green gives you a gradient with both freshness and depth. It suits sustainability brands, plant shops, matcha and health food, and the dark end will carry white text. For the full range of greens, see green gradients.

Text on a mint green gradient

Mint is one of the lightest colours there is, so white type disappears on it: white on spearmint #a7f3d0 measures well under 2 to 1. Forest green #064e3b on the same mint measures about 7.6 to 1 and keeps the whole design in one colour family. Only switch to white where the gradient has deepened to emerald #047857 or darker. Colour contrast and accessibility explains the thresholds.

In Gradiently, Pro turns one design into every size you need in one step, and Auto ink picks light or dark type for each line from the Mark's own colours, so a pale mint never ends up with unreadable white text after a resize. Small cafés and shops can find more ideas in coffee shop branding and spring colour palettes.

Mint green gradient CSS for a website

On a website, mint works best as a section background rather than the whole page, so it reads as a fresh moment between white sections. A faint warm light in one corner stops a large mint area from feeling flat, and setting body text in forest green rather than black keeps the page soft.

.section-mint {
  background-color: #ecfdf5; /* fallback */
  background-image:
    radial-gradient(circle at 85% 20%, #fde2cf 0%, transparent 35%),
    linear-gradient(160deg, #fbfdf7 0%, #d1fae5 50%, #a7f3d0 100%);
  color: #064e3b;
}

.section-mint a { color: #065f46; }