# CSS-Farbverlauf und Performance: machen Verläufe langsam?

[Canonical HTML page](https://gradiently.design/de/guide/css-gradient-performance)

Ein statischer CSS-Farbverlauf ist fast kostenlos. Die Kosten entstehen durch das, was Menschen mit Verläufen anstellen: riesige Unschärfen, Hintergründe, die beim Scrollen neu zeichnen, und Animationen, die nie enden. So erkennst du den Unterschied.

## The short version

- Ein statischer CSS-Farbverlauf kostet beim Laden fast nichts, denn er ist eine Textzeile und keine Datei, die man herunterladen und dekodieren muss.
- Farbverläufe kosten Zeichenzeit, die mit der gezeichneten Fläche und der Zahl der Ebenen wächst, ein statischer Verlauf wird aber einmal gezeichnet und dann wiederverwendet.
- Die echten Performance-Risiken sind große Unschärfefilter, Hintergründe, die beim Scrollen neu zeichnen, und Verlaufsanimationen, die in jedem Frame neu zeichnen.
- Transform oder Opacity auf einer Verlaufsebene zu animieren ist meist weit günstiger, als background-position oder Farbstopps zu animieren.
- Die einzig verlässliche Antwort für eine bestimmte Seite ist zu messen, mit Paint Flashing und einer Performance-Aufzeichnung in den Entwicklertools des Browsers.

Gute **Performance von CSS-Farbverläufen** ist der Normalfall: Ein statischer Verlauf macht eine Website in keiner spürbaren Weise langsamer. Er ist eine Textzeile, also gibt es nichts herunterzuladen, nichts zu dekodieren und auf nichts zu warten. Farbverläufe kosten ein wenig Zeichenzeit, wie jede andere Farbe auf der Seite. Langsame Seiten entstehen durch einige bestimmte Muster, die auf Verläufen aufbauen: große Unschärfen, Neuzeichnen beim Scrollen und Animationen, die in jedem Frame neu zeichnen. Dieser Leitfaden zeigt, was was ist und wie du deine eigene Seite prüfst.

## Laden: Farbverläufe gegen Bilder

`background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6);` hat 67 Zeichen. Es kommt innerhalb deines Stylesheets an, braucht keine zusätzliche Anfrage und wird bei jeder Größe und Pixeldichte scharf gerendert. Ein Bildhintergrund braucht eine eigene Anfrage, muss dekodiert werden, bevor er gezeichnet werden kann, und muss für große Bildschirme mit hoher Dichte groß genug sein.

67 Zeichen CSS: `linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6)`

Dieser ganze Hintergrund kostet bei jeder Größe weniger zu laden als ein Satz Text.

| Hintergrund | Download | Dekodierter Speicher bei 1920×1080 |
| --- | --- | --- |
| CSS-Farbverlauf | Ein paar Dutzend Bytes in deinem CSS | Keine Bitmap vorzuhalten; wird nach Bedarf gezeichnet |
| Komprimiertes Bild (AVIF, WebP, JPEG) | Eine separate Datei, oft zehn bis hundert Kilobyte | Etwa 8,3 MB (Breite × Höhe × 4 Bytes) |
| Dasselbe Bild mit 3840×2160 für scharfes 4K | Noch größer | Etwa 33 MB |

Dekodierte Bilder werden unabhängig von der Dateigröße als volle Bitmaps gehalten. Die Speicherwerte sind einfache Arithmetik: Pixel mal vier Bytes.

Für einfache und mäßig geschichtete Hintergründe gewinnt CSS beim Laden also immer. Bilder ergeben weiter Sinn, wenn der Hintergrund wirklich komplex ist, etwa ein malerischer [Mesh-Verlauf](https://gradiently.design/de/guide/css-mesh-gradient) mit vielen Farbpunkten oder eine fotografische Textur. Dann tauschst du Dateigewicht gegen visuellen Reichtum, und das lohnt sich oft.

## Zeichnen: was ein Farbverlauf auf dem Bildschirm kostet

Um einen Farbverlauf zu zeigen, berechnet der Browser für jeden Pixel, den er bedeckt, eine Farbe: Das ist das Zeichnen. Die Arbeit wächst mit der gezeichneten Fläche, der Zahl gestapelter Verlaufsebenen und allen Effekten darüber. Bei einem statischen Hintergrund geschieht das einmal, und das Ergebnis wird beim Scrollen oder Interagieren wiederverwendet, sofern nichts es ungültig macht.

### Einmal gezeichnet

- Ein statischer Farbverlauf auf einer Karte oder einem Hero
- Mehrere geschichtete radiale Leuchten, die sich nicht bewegen
- Eine gekachelte Rauschtextur über einem Farbverlauf
- Ein mit Hintergründen gezeichneter Verlaufsrahmen

### Immer wieder neu gezeichnet

- Animation von `background-position` oder Farbstopps
- `background-attachment: fixed` beim Scrollen
- `backdrop-filter`-Unschärfe über bewegtem Inhalt
- Ein Element mit Farbverlauf, das sich ständig in der Größe ändert

## Die echten Risiken: Unschärfe, fixe Hintergründe und Animation

**Große Unschärfen.** `filter: blur()` und `backdrop-filter` lesen für jeden Pixel viele umliegende Pixel aus, und die Arbeit wächst mit Unschärferadius und Fläche. Ein unscharfer Verlauf, der einmal gezeichnet wird, ist meist unproblematisch. Ein `backdrop-filter` über Inhalt, der darunter scrollt, muss neu berechnet werden, wenn sich der Inhalt bewegt, und genau dort ruckeln [Glassmorphism](https://gradiently.design/de/guide/glassmorphism)-Oberflächen auf durchschnittlichen Handys.

**Fixe Hintergründe.** `background-attachment: fixed` hält einen Hintergrund still, während die Seite scrollt, was ihn bei jedem Scrollschritt zum Neuzeichnen zwingen kann. Willst du einen Verlauf, der an Ort und Stelle bleibt, ist ein `position: fixed`-Element hinter dem Inhalt meist günstiger, weil der Browser es als eigene Ebene bewegen kann.

**Animation.** `background-position` zu bewegen oder Farbstopps per `@property` zu animieren, zeichnet das Element in jedem Frame neu. Bei einem Button ist das trivial. Bei einem bildschirmfüllenden Hero ist es Dauerarbeit, solange die Seite offen ist, was sich auf Handys als Wärme und Akkuverbrauch zeigt.

```css
/* repaints the whole hero every frame */
.hero--costly {
  background: linear-gradient(120deg, #1e1b4b, #7c3aed, #f472b6);
  background-size: 300% 300%;
  animation: pan 12s ease-in-out infinite alternate;
}

/* the browser can usually just move a finished layer */
.hero--cheap::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(#1e1b4b, #7c3aed, #f472b6, #1e1b4b);
  animation: turn 40s linear infinite;
}

@keyframes pan { to { background-position: 100% 50%; } }
@keyframes turn { to { transform: rotate(1turn); } }
```

Zwei animierte Heros. Der zweite animiert `transform`, was Browser meist im Compositor ohne Neuzeichnen bewältigen.

Der Leitfaden zu [animierten CSS-Farbverläufen](https://gradiently.design/de/guide/css-animated-gradient) enthält alle Techniken, von der günstigsten bis zur flexibelsten.

## Ebenen und will-change

Ein Element auf eine eigene Compositor-Ebene zu heben, mit `will-change: transform` oder einer aktiven Transform-Animation, macht günstige Animation erst möglich. Es ist nicht kostenlos: Jede Ebene hält ihre eigene Bitmap im Grafikspeicher, etwa Breite × Höhe × 4 Bytes bei Gerätepixeln. Eine übergroße Ebene für einen Hero-Hintergrund ist in Ordnung. Dutzende hochgestufte Karten, jede mit eigener Verlaufsebene, können mehr Speicher verbrauchen, als sie an Zeichenzeit sparen. Füge `will-change` den Elementen hinzu, die wirklich animieren, nicht als Pauschalregel.

| Muster | Browserarbeit | Günstigere Alternative |
| --- | --- | --- |
| Animiertes `background-position` auf einem Hero | Neuzeichnen in jedem Frame | `transform` auf einer übergroßen Verlaufsebene |
| `background-attachment: fixed` | Neuzeichnen beim Scrollen | Eine `position: fixed`-Verlaufsebene hinter dem Inhalt |
| `backdrop-filter` über scrollendem Inhalt | Unschärfe wird mit dem Inhalt neu berechnet | Eine vorab weichgezeichnete statische Ebene oder eine kleinere unscharfe Fläche |
| Live-SVG-Rauschfilter auf einem großen Element | Der Filter läuft über jeden neu gezeichneten Pixel | Ein kleines gekacheltes Rauschbild |
| `will-change` auf jeder Karte | Viele Ebenen im Grafikspeicher | `will-change` nur bei dem, was animiert |

Gängige Verlaufsmuster, was sie den Browser tun lassen, und der leichtere Weg zum selben Look.

## So misst du die Performance von Farbverläufen

1. **Schalte Paint Flashing ein** Öffne in den Chrome DevTools den Rendering-Bereich und aktiviere Paint flashing. Alles, was grün aufblitzt, obwohl sich nichts ändern sollte, wird neu gezeichnet.
2. **Nimm einen Performance-Trace auf** Zeichne im Performance-Bereich ein paar Sekunden Scrollen oder ruhende Animation auf. Sieh, wie viel jedes Frames im Zeichnen steckt und ob Frames ausfallen.
3. **Drossle die CPU** Nutze die CPU-Drosselung des Performance-Bereichs, um ein langsameres Gerät zu simulieren. Ein Hero, der auf einem schnellen Laptop flüssig läuft, kann auf einem Handy der Mittelklasse kämpfen.
4. **Prüfe den Bereich Ebenen** Sieh, wie viele Compositor-Ebenen existieren und wie viel Speicher sie nutzen. Unerwartet viele Ebenen bedeuten meist, dass `will-change` überstrapaziert wird.
5. **Teste das echte Gerät** Schließe auf einem echten Handy ab. Wärme und Akkuverbrauch durch ständige Animation übersieht man auf einem Desktop leicht.

Der [Leitfaden von web.dev zur Rendering-Performance](https://web.dev/articles/rendering-performance) erklärt die Pipeline hinter diesen Werkzeugen: Style, Layout, Paint und Composite. Wer weiß, welche Stufe dein Farbverlauf auslöst, weiß, ob er günstig ist.

## Eine Performance-Checkliste für Farbverläufe

- Nutze CSS-Farbverläufe für einfache und geschichtete Hintergründe; Bilder nur, wenn der Look sie wirklich braucht.
- Halte Unschärferadien moderat und meide `backdrop-filter` über großen scrollenden Flächen.
- Ersetze `background-attachment: fixed` durch eine Ebene mit fester Position.
- Animiere auf großen Flächen `transform` oder `opacity`, nicht `background-position`.
- Langsame Ambient-Animationen können für Menschen mit [reduzierter Bewegung](https://gradiently.design/de/guide/reduced-motion) ganz enden.
- Füge Körnung als kleines gekacheltes Bild hinzu, nicht als Live-SVG-Filter auf einem großen Element; siehe [CSS-Rauschtextur](https://gradiently.design/de/guide/css-noise-texture).
- Miss vorher und nachher mit Paint Flashing und einer Performance-Aufzeichnung.

## FAQ

### Machen CSS-Farbverläufe eine Website langsam?

Statische CSS-Farbverläufe nicht in spürbarer Weise. Sie brauchen keinen Download und werden einmal gezeichnet. Große Unschärfen, fixe Hintergründe und ständige Animation kosten Performance.

### Ist ein CSS-Farbverlauf schneller als ein Hintergrundbild?

Meist ja. Ein Farbverlauf sind ein paar Dutzend Bytes CSS ohne Anfrage und Dekodierung, während ein Bild einen Download braucht und als volle Bitmap im Speicher gehalten wird.

### Sind animierte Farbverläufe schlecht für die Performance?

`background-position` oder Farbstopps zu animieren zeichnet in jedem Frame neu, was auf großen Flächen zählt. `transform` oder `opacity` auf einer Verlaufsebene zu animieren ist meist viel günstiger.

### Warum ist mein unscharfer Verlaufshintergrund langsam?

Unschärfe liest für jeden Pixel viele Nachbarpixel aus, die Kosten wachsen also mit Radius und Fläche. Am schlimmsten ist `backdrop-filter` über Inhalt, der scrollt oder animiert.

### Wie prüfe ich, ob mein Farbverlauf neu zeichnet?

Aktiviere Paint flashing im Rendering-Bereich der Chrome DevTools. Flächen, die bei ruhender Seite weiter aufblitzen, werden neu gezeichnet.