# Gradiente mesh / aurora

Também chamado de: mesh gradient, fundo aurora, manchas de gradiente, UI aurora boreal, gradiente da Stripe  
Era: 2020 em diante (hero da Stripe em 2020, wallpapers do macOS Big Sur, Linear 2021)  
Página: https://designforai.dev/pt/style/gradient-mesh-aurora

## Traços

- fundos feitos de vários gradientes radiais sobrepostos que se misturam como uma aurora
- 3-5 matizes, geralmente do frio ao quente (violeta, azul, verde-azulado, rosa, pêssego)
- animação lenta das manchas: loops de 15-30s, escala e deriva sutis
- o conteúdo fica num painel sólido ou levemente fosco à frente
- tipografia neutra e moderna para o fundo carregar o clima
- overlay de ruído ou grão para evitar banding nos gradientes
- muitas vezes só no hero; o resto da página é simples

Paleta: #0f0c29 base escura (ou #ffffff clara), #7f5af0 violeta, #2cb1bc verde-azulado, #ff8fab rosa, #ffd166 pêssego, #fffffe texto sobre escuro

Tipografia: Manrope, DM Sans, Plus Jakarta Sans ou a "General Sans" parecida com Satoshi (gratuita via Fontshare); títulos 600-700 a 48-72px com -0.02em, corpo 400 a 17px

## Faça

- construa o mesh com 4-5 manchas radial-gradient em posição absoluta, cada uma com 40-60vw, blur(60-100px), mix-blend-mode screen sobre escuro ou multiply sobre claro
- adicione um overlay de ruído SVG a 5-8% de opacidade para matar o banding
- mantenha o mesh no hero e numa faixa do rodapé; o meio da página é calmo

## Evite

- não anime as manchas mais rápido que 15s nem as escale além de 1.2x; dá enjoo
- não coloque texto pequeno direto sobre o mesh sem um painel ou scrim
- não use espalhamentos de matiz arco-íris; escolha uma família de 3-5 matizes relacionados

Conhecido por: Stripe, Linear (hero de 2021), wallpapers do Apple macOS Big Sur, marketing do Framer

## Semente CSS

```css
:root{--bg:#0f0c29; --fg:#fffffe; --accent:#7f5af0; --accent2:#2cb1bc; --accent3:#ff8fab; --radius:16px; --grain:0.06; --font:'Manrope',sans-serif}
```

## Prompt

Construa o site com um hero em gradiente mesh aurora. Base #0f0c29. Atrás do hero, posicione cinco círculos em posição absoluta (50vw cada, border-radius 50%, filter blur(90px), mix-blend-mode screen) em #7f5af0, #2cb1bc, #ff8fab, #ffd166 e #4f46e5, sobrepostos em deslocamentos diferentes, cada um derivando no próprio loop de 20-28s ease-in-out infinite (translate de até 10%, scale de 0.9 a 1.15). Sobreponha uma camada de ruído SVG feTurbulence a opacity 0.06 em todo o hero. Texto #fffffe, secundário rgba(255,255,254,0.7). Fonte Manrope: h1 700 a 68px com -0.025em, subtítulo 400 a 20px, corpo 17px. O conteúdo do hero não fica sobre nada, mas tem um scrim escuro suave (radial-gradient rgba(15,12,41,0.6)) atrás do texto para legibilidade. Botão primário branco com texto #0f0c29, raio 12px; o secundário é um contorno de 1px rgba(255,255,255,0.3). Abaixo do hero a página é #0f0c29 chapado com filetes 1px rgba(255,255,255,0.08) e cards com raio 16px. Sob prefers-reduced-motion, congele as manchas.