# Gradiente verde-menta: códigos frescos e claros

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

A menta é a cor mais fresca da roda e a mais fácil de errar: um passo demasiado fria e parece pasta de dentes ou corredor de hospital. Aqui ficam códigos claros que continuam apetecíveis.

## The short version

- Um gradiente verde-menta mistura verdes pálidos, ligeiramente azulados, normalmente com branco ou creme na ponta clara.
- A menta parece clínica quando é combinada com cinzento frio e branco puro, e fresca quando é combinada com creme, pêssego ou rosa-claro.
- A menta pálida e o pêssego são opostos, mas em força pastel misturam-se limpamente sem ficar turvos.
- A menta é demasiado clara para texto branco; um verde-floresta profundo como #064e3b lê-se bem sobre ela.
- A menta assenta bem a cafés, cuidados de pele, marcas infantis, sustentabilidade e campanhas de primavera.

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

## Um gradiente verde-menta numa linha de CSS

Se só precisas de um, começa aqui. Vai de um branco quente, cremoso, a uma menta clara, por isso nunca parece frio, e deixa muito espaço calmo no topo para palavras.

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

De branco creme a menta. Escreve os títulos em verde-floresta profundo `#064e3b` na metade superior.

## Gradientes de menta pálida

Estes vivem perto do branco. São perfeitos para fundos com muita leitura, como uma ementa ou uma lista de preços, e para fotografias de produto em que queres que a embalagem seja a protagonista. Os [gradientes pastel](https://gradiently.design/pt-pt/guide/pastel-gradients) seguem 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 gelo: `linear-gradient(135deg, #ecfeff 0%, #bdf5dc 100%)`

Cinco mentas pálidas. “Menta gelo” puxa ao azul para um ar mais frio e limpo; “Folha nova” puxa ao amarelo para um ar mais quente e botânico.

Decide cedo para que lado a tua menta pende. As mentas azuladas parecem frias, limpas e modernas, o que assenta a tecnologia, fatos de banho e cuidados de pele. As mentas amareladas parecem quentes e comestíveis, o que assenta a comida, plantas e tudo o que é para crianças. Misturar as duas num gradiente é possível, mas escolhe uma para dominar, para que a marca tenha uma temperatura clara.

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

O oposto da menta na roda de cores é um rosa coral suave. Em força total, os opostos misturam-se em cinzento, mas em força pastel há tão pouca saturação que se atravessam limpamente. Isso faz de menta e pêssego, ou menta e rosa-claro, uma das combinações mais bonitas, e o calor impede a menta de parecer médica. Há mais combinações nas [combinações de cores para gradientes](https://gradiently.design/pt-pt/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%)`
- Sorvete de pistácio: `linear-gradient(135deg, #a7f3d0 0%, #fef3c7 50%, #fed7aa 100%)`

Menta com um parceiro quente. Parecem gelado, flores e pastelarias, e 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 logótipos.

## Menta que não parece pasta de dentes

Muita gente associa a menta a pasta de dentes, clínicas e fardas hospitalares. Se não estás nesses setores, afasta-te das combinações que os sugerem.

### Parece clínico

- Menta com branco puro e cinzento frio
- Menta saturada como `#98ff98` ou `#3eb489` em preenchimento liso
- Letra sem serifa cinzenta e fina
- Superfície digital dura e perfeitamente limpa

### Parece fresco

- Menta com creme, pêssego ou rosa-claro
- Mentas suaves como `#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 se pensa. Um gradiente digital pálido sem textura parece uma predefinição; um pouco de ruído faz com que pareça um cartão de ementa impresso. Os [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) mostram como.

## Gradientes de menta mais profundos: até esmeralda e floresta

Levar a menta até ao esmeralda ou ao verde-floresta dá um gradiente com frescura e profundidade. Assenta a marcas de sustentabilidade, lojas de plantas, matcha e alimentação saudável, e a ponta escura aguenta texto branco. Para toda a gama de verdes, vê os [gradientes verdes](https://gradiently.design/pt-pt/guide/green-gradient).

- Da menta ao 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 ponta escura. Os títulos vão em baixo a branco ou em cima em tinta floresta.

## Texto sobre um gradiente verde-menta

A menta é uma das cores mais claras que existem, por isso o texto branco desaparece nela: branco sobre hortelã `#a7f3d0` mede bem abaixo de 2 para 1. O verde-floresta `#064e3b` sobre a mesma menta mede cerca de 7,6 para 1 e mantém todo o design na mesma família de cor. Só passa para branco onde o gradiente já aprofundou até esmeralda `#047857` ou mais escuro. O [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) explica os limiares.

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

Medições em cor lisa. Num gradiente, verifica o ponto mais claro por trás de cada linha.

Uma publicação de produto de um café com título em verde-floresta sobre um gradiente de menta pálida e creme

Uma publicação de café em menta fresca com texto verde-floresta. Parece frio, doce e convidativo.

O mesmo design de café como story vertical sobre o gradiente de menta

A mesma publicação como story, com a menta desenhada para o formato alto.

No Gradiently, o Pro transforma um design em todos os tamanhos de que precisas num só passo, e a tinta automática escolhe texto claro ou escuro para cada linha a partir das cores do próprio Mark, por isso uma menta pálida nunca fica com texto branco ilegível depois de redimensionar. Pequenos cafés e lojas encontram mais ideias na [identidade de marca para cafés](https://gradiently.design/pt-pt/guide/coffee-shop-branding) e nas [paletas de cores de primavera](https://gradiently.design/pt-pt/guide/spring-color-palettes).

## CSS de gradiente verde-menta para um site

Num site, a menta funciona melhor como fundo de secção do que como página inteira, para que surja como um momento fresco entre secções brancas. Uma luz quente e ténue num canto evita que uma grande área de menta pareça plana, e usar verde-floresta em vez de preto no texto corrido 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 as ligações em esmeralda profundo passam no contraste em toda a área.

## FAQ

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

Não existe um único padrão. `#98ff98` é uma menta viva comum e `#3eb489` uma mais profunda; para gradientes, mentas mais suaves como `#d1fae5` e `#a7f3d0` costumam ficar melhor.

### Que cores combinam com um gradiente verde-menta?

Creme, pêssego, rosa-claro, amarelo-manteiga e verde-floresta. Os parceiros quentes impedem a menta de parecer clínica.

### Que cor de texto fica melhor sobre verde-menta?

Verde-floresta profundo ou carvão. O texto branco falha o contraste em quase todos os tons de menta.

### Porque é que o meu gradiente de menta parece clínico?

Provavelmente está combinado com branco puro e cinzento frio. Troca-os por creme e um acento quente, e junta um pouco de grão.

### Menta e rosa combinam num gradiente?

Sim, em força pastel. A menta pálida e o rosa-claro misturam-se limpamente porque há pouca saturação que possa ficar cinzenta.