# Degradê verde-menta: códigos frescos e leves

[Canonical HTML page](https://gradiently.design/pt-br/guide/mint-gradient)

A menta é a cor mais fresca do círculo cromático e a mais fácil de errar: um passo a mais para o frio e parece pasta de dente ou corredor de hospital. Aqui estão códigos leves que continuam apetitosos.

## The short version

- Um degradê verde-menta mistura verdes pálidos, levemente azulados, geralmente com branco ou creme na ponta clara.
- A menta parece clínica quando combinada com cinza frio e branco puro, e fresca quando combinada com creme, pêssego ou rosa-claro.
- Menta pálida e pêssego são opostos, mas na força pastel se misturam de forma limpa, sem ficar turvos.
- A menta é clara demais para texto branco; um verde-floresta escuro, como #064e3b, se lê bem sobre ela.
- A menta combina com cafeterias, cuidados com a pele, marcas infantis, sustentabilidade e campanhas de primavera.

Um **degradê verde-menta** mistura verdes pálidos e levemente azulados, de quase branco a um hortelã suave, e poucos verdes parecem tão frescos. Mantido quente, com um parceiro creme ou pêssego, lembra um café, um jardim ou uma manhã de primavera. Combinado com cinza e branco puro, começa a parecer sala de espera de dentista. Aqui estão códigos de menta que continuam frescos, os parceiros que os aquecem e a cor de texto que os mantém legíveis.

## Um degradê verde-menta em uma linha de CSS

Se você só precisa de um, comece por este. Ele vai de um branco quente e cremoso a uma menta clara, então nunca parece frio, e deixa bastante espaço calmo no alto para as palavras.

Menta fresca: `linear-gradient(160deg, #fbfdf7 0%, #d1fae5 45%, #a7f3d0 100%)`

De branco creme a menta. Coloque os títulos em verde-floresta escuro `#064e3b` na metade de cima.

## Degradês de menta pálida

Estes ficam perto do branco. São perfeitos para fundos que carregam muita leitura, como um cardápio ou uma lista de preços, e para fotos de produto em que a embalagem deve ser a heroína. [Degradês pastel](https://gradiently.design/pt-br/guide/pastel-gradients) tem a mesma abordagem para todas as cores.

- Leite de menta: `linear-gradient(180deg, #f7fef9 0%, #d1fae5 100%)`
- Hortelã: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%)`
- Folha nova: `linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%)`
- Orvalho da manhã: `radial-gradient(circle at 30% 25%, #ffffff 0%, #d1fae5 45%, #a7f3d0 100%)`
- Menta gelada: `linear-gradient(135deg, #ecfeff 0%, #bdf5dc 100%)`

Cinco mentas pálidas. A “Menta gelada” puxa para o azul, para um clima mais frio e limpo; a “Folha nova” puxa para o amarelo, mais quente e botânica.

Decida cedo para que lado a sua menta puxa. Mentas azuladas parecem frias, limpas e modernas, o que combina com tecnologia, moda praia e cuidados com a pele. Mentas amareladas parecem quentes e comestíveis, o que combina com comida, plantas e tudo para crianças. Misturar os dois num degradê é possível, mas escolha um para dominar, para que a marca tenha uma temperatura clara.

## Menta com pêssego, creme ou rosa-claro

O oposto da menta no círculo cromático é um rosa-coral suave. Na força total, opostos se misturam num cinza, mas na força pastel há tão pouca saturação que um atravessa o outro de forma limpa. Isso faz de menta e pêssego, ou menta e rosa-claro, uma das combinações mais bonitas que existem, e o calor impede a menta de parecer médica. Mais combinações em [combinações de cores para degradê](https://gradiently.design/pt-br/guide/gradient-color-combinations).

- Menta e pêssego: `linear-gradient(135deg, #d1fae5 0%, #fde2cf 100%)`
- Menta e rosa-claro: `linear-gradient(135deg, #ccfbf1 0%, #fce7f3 100%)`
- Creme e menta: `linear-gradient(180deg, #fef9ec 0%, #d1fae5 100%)`
- Sorbet de pistache: `linear-gradient(135deg, #a7f3d0 0%, #fef3c7 50%, #fed7aa 100%)`

Menta com um parceiro quente. Estes lembram sorvete, flores e padarias, não clínicas.

- Branco creme: #fbfdf7
- Leite de menta: #d1fae5
- Hortelã: #a7f3d0
- Pêssego: #fde2cf
- Rosa-claro: #fce7f3
- Tinta floresta: #064e3b

Uma paleta de menta quente: creme, duas mentas, dois pastéis quentes e um verde-floresta para texto e logos.

## Menta que não parece pasta de dente

Muita gente associa a menta a pasta de dente, clínicas e uniformes de hospital. Se você não atua nesses setores, fuja das combinações que os sugerem.

### Parece clínico

- Menta com branco puro e cinza frio
- Menta saturada, como `#98ff98` ou `#3eb489`, em preenchimento chapado
- Letras finas, sem serifa e cinza
- Superfície digital dura e perfeitamente limpa

### Parece fresco

- Menta com creme, pêssego ou rosa-claro
- Mentas suaves, de `#d1fae5` a `#a7f3d0`
- Texto em verde-floresta com algum peso
- Um toque de grão, como papel impresso

O grão importa mais do que você imagina aqui. Um degradê digital pálido sem textura parece o padrão de fábrica; um pouco de ruído o faz parecer um cartão de cardápio impresso. [Degradês com grão](https://gradiently.design/pt-br/guide/grainy-gradients) mostra como.

## Degradês de menta mais profundos: até a esmeralda e a floresta

Descer a menta até o verde-esmeralda ou o verde-floresta dá um degradê com frescor e profundidade. Combina com marcas de sustentabilidade, lojas de plantas, matcha e comida saudável, e a ponta escura aguenta texto branco. Para toda a gama de verdes, veja [degradês verdes](https://gradiently.design/pt-br/guide/green-gradient).

- Da menta à esmeralda: `linear-gradient(180deg, #d1fae5 0%, #34d399 50%, #047857 100%)`
- Estufa: `linear-gradient(160deg, #a7f3d0 0%, #059669 55%, #064e3b 100%)`
- Matcha: `linear-gradient(135deg, #d9f99d 0%, #86efac 45%, #15803d 100%)`
- Luz de menta na floresta: `radial-gradient(circle at 80% 15%, #a7f3d0 0%, #10b981 25%, #064e3b 70%, #022c22 100%)`

Menta na ponta clara, floresta na escura. Os títulos vão embaixo em branco ou em cima em tinta floresta.

## Texto sobre um degradê verde-menta

A menta é uma das cores mais claras que existem, então o texto branco some nela: branco sobre hortelã `#a7f3d0` mede bem menos de 2 para 1. O verde-floresta `#064e3b` sobre a mesma menta mede cerca de 7,6 para 1 e mantém o design inteiro numa só família de cor. Só passe para o branco onde o degradê já tiver escurecido até a esmeralda `#047857` ou mais. [Contraste de cores e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica os limites.

| Fundo | Texto branco | Texto floresta #064e3b |
| --- | --- | --- |
| Leite de menta `#d1fae5` | Reprova | Passa com folga |
| Hortelã `#a7f3d0` | Menos de 2:1, reprova | Cerca de 7,6:1 |
| Menta `#6ee7b7` | Cerca de 1,5:1, reprova | Cerca de 6,4:1 |
| Esmeralda `#047857` | Cerca de 5,5:1, passa | Reprova |

Medições de cor chapada. Num degradê, confira o ponto mais claro atrás de cada linha.

Post de produto de um café com título em verde-floresta sobre um degradê de menta pálida e creme

Um post de café em menta fresca com texto verde-floresta. Parece gelado, doce e convidativo.

O mesmo design de café como um story alto sobre o degradê de menta

O mesmo post como story, com a menta renderizada para o quadro alto.

Na Gradiently, o Pro transforma um design em todos os tamanhos de que você precisa em um só passo, e a tinta automática escolhe texto claro ou escuro para cada linha a partir das cores do próprio Mark, então uma menta pálida nunca termina com texto branco ilegível depois de um redimensionamento. Pequenas cafeterias e lojas encontram mais ideias em [branding para cafeterias](https://gradiently.design/pt-br/guide/coffee-shop-branding) e [paletas de cores de primavera](https://gradiently.design/pt-br/guide/spring-color-palettes).

## CSS de degradê verde-menta para um site

Num site, a menta funciona melhor como fundo de uma seção do que como a página inteira, para que apareça como um momento fresco entre seções brancas. Uma leve luz quente num canto evita que uma área grande de menta pareça chapada, e usar verde-floresta no texto do corpo, em vez de preto, mantém a página suave.

```css
.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; }
```

Menta fresca com uma luz suave de pêssego no canto superior direito. O texto verde-floresta e os links esmeralda escuros passam no contraste sobre ela.

## FAQ

### Qual é o código hex do verde-menta?

Não há um padrão único. `#98ff98` é uma menta viva comum e `#3eb489` uma mais profunda; para degradês, mentas mais suaves, como `#d1fae5` e `#a7f3d0`, costumam ficar melhores.

### Quais cores combinam com um degradê verde-menta?

Creme, pêssego, rosa-claro, amarelo-manteiga e verde-floresta. Parceiros quentes evitam que a menta pareça clínica.

### Qual cor de texto fica melhor sobre o verde-menta?

Verde-floresta escuro ou grafite. O texto branco reprova no contraste em quase todos os tons de menta.

### Por que o meu degradê de menta parece clínico?

Provavelmente está combinado com branco puro e cinza frio. Troque-os por creme e um destaque quente e acrescente um grão leve.

### Menta e rosa combinam num degradê?

Combinam, na força pastel. Menta pálida e rosa-claro se misturam de forma limpa porque há pouca saturação para virar cinza.