# Gradient Mesh / Aurora

Auch bekannt als: Mesh-Verlauf, Aurora-Hintergrund, Verlaufskleckse, Nordlicht-UI, Stripe-Verlauf  
Ära: ab 2020 (Stripe-Hero 2020, macOS-Big-Sur-Wallpaper, Linear 2021)  
Seite: https://designforai.dev/de/style/gradient-mesh-aurora

## Merkmale

- Hintergründe aus mehreren überlappenden radialen Verläufen, die wie eine Aurora ineinanderfließen
- 3-5 Farbtöne, meist kühl bis warm (Violett, Blau, Petrol, Pink, Pfirsich)
- langsame Animation der Kleckse: 15-30s Loops, dezente Skalierung und Drift
- Inhalt sitzt auf einem soliden oder leicht gefrosteten Panel davor
- Schrift ist neutral und modern, damit der Hintergrund die Stimmung trägt
- Rausch- oder Körnungs-Overlay gegen Banding in den Verläufen
- oft nur im Hero; der Rest der Seite ist schlicht

Palette: #0f0c29 dunkle Basis (oder #ffffff hell), #7f5af0 Violett, #2cb1bc Petrol, #ff8fab Pink, #ffd166 Pfirsich, #fffffe Text auf Dunkel

Schrift: Manrope, DM Sans, Plus Jakarta Sans oder Satoshi-Ersatz "General Sans" (frei über Fontshare); Überschriften 600-700 bei 48-72px mit -0.02em, Fließtext 400 bei 17px

## Do

- baue das Mesh aus 4-5 absolut positionierten radial-gradient-Klecksen, je 40-60vw, blur(60-100px), mix-blend-mode screen auf Dunkel oder multiply auf Hell
- ergänze ein SVG-Rausch-Overlay bei 5-8 % Opacity gegen Banding
- halte das Mesh im Hero und einem Footer-Band; die Seitenmitte bleibt ruhig

## Don't

- animiere Kleckse nicht schneller als 15s und skaliere sie nicht über 1.2x; das wird übel
- setze keinen kleinen Text direkt auf das Mesh ohne Panel oder Scrim
- nutze keine Regenbogen-Farbspreizung; wähle eine Familie aus 3-5 verwandten Tönen

Bekannt dafür: Stripe, Linear (Hero 2021), Apple-macOS-Big-Sur-Wallpaper, Framer-Marketing

## CSS-Seed

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

## Prompt

Baue die Seite mit einem Aurora-Gradient-Mesh-Hero. Basis #0f0c29. Platziere hinter dem Hero fünf absolut positionierte Kreise (je 50vw, border-radius 50%, filter blur(90px), mix-blend-mode screen) in #7f5af0, #2cb1bc, #ff8fab, #ffd166 und #4f46e5, mit unterschiedlichen Versätzen überlappend, jeder in einem eigenen 20-28s ease-in-out infinite Loop driftend (translate bis 10 %, scale 0.9 bis 1.15). Lege eine SVG-feTurbulence-Rauschebene bei opacity 0.06 über den Hero. Text #fffffe, Sekundär rgba(255,255,254,0.7). Schrift Manrope: h1 700 bei 68px mit -0.025em, Subline 400 bei 20px, Fließtext 17px. Der Hero-Inhalt sitzt auf nichts, hat aber einen weichen dunklen Scrim (radial-gradient rgba(15,12,41,0.6)) hinter dem Text für Lesbarkeit. Primärbutton weiß mit #0f0c29 Text, Radius 12px; sekundär ist eine 1px rgba(255,255,255,0.3) Outline. Unter dem Hero ist die Seite flaches #0f0c29 mit 1px rgba(255,255,255,0.08) Linien und Karten mit Radius 16px. Unter prefers-reduced-motion die Kleckse einfrieren.