# Gradiente mesh / aurora

También llamado: gradiente mesh, fondo aurora, manchas de gradiente, UI de aurora boreal, gradiente de Stripe  
Época: 2020 en adelante (hero de Stripe en 2020, fondos de macOS Big Sur, Linear 2021)  
Página: https://designforai.dev/es/style/gradient-mesh-aurora

## Rasgos

- fondos hechos de varios gradientes radiales solapados que se funden como una aurora
- 3-5 tonos, normalmente de frío a cálido (violeta, azul, verde azulado, rosa, melocotón)
- animación lenta de las manchas: bucles de 15-30s, escala y deriva sutiles
- el contenido se asienta sobre un panel sólido o ligeramente esmerilado por delante
- la tipografía es neutra y moderna para que el fondo lleve el ambiente
- capa de ruido o grano para evitar el bandeado en los gradientes
- a menudo solo en el hero; el resto de la página es liso

Paleta: #0f0c29 base oscura (o #ffffff clara), #7f5af0 violeta, #2cb1bc verde azulado, #ff8fab rosa, #ffd166 melocotón, #fffffe texto sobre oscuro

Tipografía: Manrope, DM Sans, Plus Jakarta Sans o la parecida a Satoshi "General Sans" (gratis en Fontshare); títulos 600-700 a 48-72px con -0.02em, cuerpo 400 a 17px

## Haz

- construye el mesh con 4-5 manchas de radial-gradient posicionadas en absoluto, cada una de 40-60vw, blur(60-100px), mix-blend-mode screen sobre oscuro o multiply sobre claro
- añade una capa de ruido SVG al 5-8% de opacidad para matar el bandeado
- mantén el mesh en el hero y en una banda del pie; el centro de la página está en calma

## Evita

- no animes las manchas más rápido de 15s ni las escales más allá de 1.2x; marea
- no pongas texto pequeño directamente sobre el mesh sin un panel o un velo
- no uses extensiones de tono arcoíris; elige una familia de 3-5 tonos relacionados

Conocido por: Stripe, Linear (hero de 2021), fondos de Apple macOS Big Sur, marketing de Framer

## Semilla CSS

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

## Prompt

Construye el sitio con un hero de gradiente mesh aurora. Base #0f0c29. Detrás del hero, coloca cinco círculos posicionados en absoluto (50vw cada uno, border-radius 50%, filter blur(90px), mix-blend-mode screen) en #7f5af0, #2cb1bc, #ff8fab, #ffd166 y #4f46e5, solapados con distintos desplazamientos, cada uno a la deriva en su propio bucle de 20-28s ease-in-out infinite (translate hasta el 10%, scale de 0.9 a 1.15). Superpón una capa de ruido SVG feTurbulence a opacity 0.06 sobre todo el hero. Texto #fffffe, secundario rgba(255,255,254,0.7). Fuente Manrope: h1 700 a 68px con -0.025em, subtítulo 400 a 20px, cuerpo 17px. El contenido del hero no lleva panel, pero sí un velo oscuro suave (radial-gradient rgba(15,12,41,0.6)) detrás del texto para la legibilidad. Botón primario blanco con texto #0f0c29, radio 12px; el secundario es un contorno de 1px rgba(255,255,255,0.3). Bajo el hero la página es #0f0c29 liso con filetes 1px rgba(255,255,255,0.08) y tarjetas con radio 16px. Bajo prefers-reduced-motion, congela las manchas.