# Abstrakter Hintergrund: Formen, Flächen und Fluss

[Canonical HTML page](https://gradiently.design/de/guide/abstract-backgrounds)

Abstrakte Hintergründe transportieren Stimmung, ohne eine Geschichte zu erzählen, deshalb liegen sie hinter so vielen Überschriften, Folien und Produktseiten. Die richtige Art der Abstraktion zu wählen, ist die halbe Arbeit.

## The short version

- Ein abstrakter Hintergrund besteht aus Farbe, Form und Textur statt aus einer erkennbaren Szene oder einem Objekt.
- Die meisten abstrakten Hintergründe gehören zu einer von drei Arten: geometrisch (harte Kanten und Muster), fließend (weiche Übergänge und fließende Flächen) und texturiert (Körnung, Rauschen und Material).
- Geometrische Hintergründe wirken strukturiert und präzise, fließende ruhig oder lebendig, und texturierte wirken körperlich und handgemacht.
- Auch abstrakte Hintergründe brauchen überall dort, wo Text steht, eine ruhige Fläche mit gleichmäßiger Helligkeit.
- Viele geometrische und fließende Hintergründe lassen sich in reinem CSS mit linearen, radialen, konischen und sich wiederholenden Farbverläufen bauen.

Ein **abstrakter Hintergrund** besteht aus Farbe, Form und Textur statt aus einer erkennbaren Szene. Fast alle gehören zu einer von drei Familien: **geometrische** Hintergründe aus harten Kanten, Streifen und Mustern, **fließende** Hintergründe aus weichen Übergängen und fließenden Flächen sowie **texturierte** Hintergründe aus Körnung, Rauschen und Material. Wähle die Familie, die zum gewünschten Gefühl passt, und lass überall dort eine ruhige Fläche, wo Worte stehen.

Dieser Artikel führt dich durch jede Familie mit Live-Beispielen und Codes, sagt dir, wann du welche nutzt, und zeigt, wie ein abstrakter Hintergrund den Inhalt nicht erdrückt. Zu den Verlaufsarten, auf denen viele von ihnen aufbauen, findest du mehr in [Arten von Farbverläufen](https://gradiently.design/de/guide/types-of-gradients).

## Drei Arten abstrakter Hintergründe

| Art | Gebaut aus | Wirkung | Passt zu |
| --- | --- | --- | --- |
| Geometrisch | Harten Stopps, Streifen, Rastern, Kreisen, Keilen | Strukturiert, präzise, energiegeladen | Tech, Sport, Events, redaktionelle Layouts |
| Fließend | Weichen Farbverläufen, Meshes, Leuchten, fließenden Bändern | Ruhig, lebendig, hochwertig | Marken, Produktseiten, Wellness, Musik |
| Texturiert | Körnung, Rauschen, Papier, Stoff, Glas | Körperlich, handwerklich, warm | Handwerk, Food, Print, Mode, alles Handgemachte |

Die drei Familien. Viele gute Hintergründe kombinieren zwei, etwa einen fließenden Farbverlauf mit feiner Körnung.

## Geometrische abstrakte Hintergründe

Geometrische Hintergründe arbeiten mit klaren Kanten: Teilungen, Streifen, Ringe, Keile und Raster. Sie wirken gewollt und strukturiert und passen von Natur aus zu starken typografischen Layouts wie dem [Schweizer Stil](https://gradiently.design/de/guide/swiss-design). In CSS erzeugen harte Farbstopps (zwei Farben an derselben Position) die Kanten.

- Diagonale Teilung: `linear-gradient(135deg, #0f172a 0% 50%, #f97316 50% 100%)`
- Ton-in-Ton-Streifen: `repeating-linear-gradient(45deg, #1e1b4b 0 18px, #312e81 18px 36px)`
- Geviertelte Farbe: `conic-gradient(from 45deg, #f43f5e 0 25%, #f59e0b 0 50%, #10b981 0 75%, #3b82f6 0)`
- Sonnenstrahlen: `repeating-conic-gradient(from 0deg at 50% 100%, #fde68a 0deg 6deg, #fb923c 6deg 12deg)`
- Konzentrische Ringe: `repeating-radial-gradient(circle at 50% 50%, #0b132b 0 14px, #1c2541 14px 28px)`
- Drei Bänder: `linear-gradient(90deg, #111827 0% 33.3%, #7c3aed 33.3% 66.6%, #f5f3ff 66.6% 100%)`

Sechs geometrische Hintergründe, jeder ein einzelner CSS-Farbverlauf mit harten Stopps. Ton-in-Ton-Varianten wie die Streifen und Ringe sind ruhig genug für Text.

Der Trick bei geometrischen Hintergründen ist der Ton. Kontrastreiche Streifen oder Karos flimmern, und Text darauf ist kaum zu lesen. Halte die Musterfarben in der Helligkeit nah beieinander, wie bei den Streifen und Ringen oben, und spare hohen Kontrast für Flächen ohne Worte auf. Viele weitere Muster findest du in [CSS-Mustern](https://gradiently.design/de/guide/css-patterns).

## Fließende abstrakte Hintergründe

Fließende Hintergründe haben gar keine Kanten: Farbe sammelt sich, driftet und faltet sich wie Licht auf Wasser oder Seide. Dazu gehören Mesh-Verläufe, Aurora-Leuchten und fließende Bänder. Sie wirken ruhiger und hochwertiger als geometrische, und auf ihnen lässt sich Text am leichtesten setzen, weil eine weiche Fläche große gleichmäßige Bereiche hat.

- Flüssige Dämmerung: `radial-gradient(ellipse at 20% 30%, #ff7a59 0%, #c43d7a 40%, #2b1055 100%)`
- Aurora-Band: `linear-gradient(170deg, #03121f 0%, #0b3b3a 40%, #2dd4bf 55%, #0b3b3a 70%, #03121f 100%)`
- Tiefes Wasser: `radial-gradient(ellipse at 70% 70%, #a5f3fc 0%, #60a5fa 35%, #3730a3 75%, #1e1b4b 100%)`
- Pastellblüte: `radial-gradient(circle at 35% 40%, #fef3c7 0%, #fbcfe8 40%, #c4b5fd 80%, #a78bfa 100%)`

Fließende Flächen als einzelne Farbverläufe. Echte fließende Hintergründe schichten mehrere davon übereinander, so entstehen auch CSS-Mesh-Verläufe.

```css
.fluid {
  background-color: #2b1055;
  background-image:
    radial-gradient(40% 50% at 20% 30%, #ff7a59cc, transparent 70%),
    radial-gradient(45% 55% at 80% 25%, #c43d7acc, transparent 70%),
    radial-gradient(50% 60% at 60% 85%, #5b3cc4cc, transparent 70%);
}
```

Ein fließender Hintergrund aus drei überlappenden radialen Leuchten auf tiefem Grund. Verschiebe die `at`-Positionen, um zu steuern, wo sich das Licht sammelt.

Fließende Hintergründe gibt es in benannten Stilen: [Mesh-Verläufe](https://gradiently.design/de/guide/mesh-gradients) mischen mehrere Farbpunkte über eine Fläche, und [Aurora-Verläufe](https://gradiently.design/de/guide/aurora-gradients) lassen leuchtende Farbflächen auf dunklem Grund schweben. Beide sehen mit einer Spur Körnung obendrauf am besten aus.

## Texturierte abstrakte Hintergründe

Textur macht aus flacher Farbe eine Oberfläche, die man fast anfassen kann. Feine Körnung wirkt wie Film, eine gröbere Struktur wie Papier, weiche Fasern wie Stoff, ein mattierter Weichzeichner wie Glas. Textur kann der ganze Hintergrund sein, etwa bei einer papierfarbenen Fläche, oder eine Ebene über einem Farbverlauf, und so entstehen die meisten hochwertig wirkenden Verlaufshintergründe.

Ein Post im Hochformat im Journal-Stil mit einer Überschrift auf einem weich texturierten, warmen Hintergrund

Eine texturierte Fläche für eine Handwerksmarke: Die Oberfläche selbst setzt den Ton.

Eine Release-Ankündigung im Hochformat mit einer Überschrift auf einem glatten, kühlen fließenden Farbverlauf

Eine fließende Fläche für ein Software-Release: ruhig, hell und klar.

Halte Textur dezent, wenn Text darüberliegt: genug, um auf Armlänge zu wirken, aber nicht so viel, dass Buchstaben schmutzig aussehen. [Hintergrundtextur](https://gradiently.design/de/guide/background-texture) behandelt Körnung, Papier, Stoff und Glas im Detail, und [körnige Farbverläufe](https://gradiently.design/de/guide/grainy-gradients) erklärt, warum ein wenig Rauschen Farbe teuer aussehen lässt.

## So machst du einen abstrakten Hintergrund aus Markenfarben

Die besten abstrakten Hintergründe sehen abstrakt aus, gehören aber jemandem. Das gelingt, wenn du mit deinen eigenen Farben und Formen startest statt mit einem Stock-Paket.

1. **Nimm zwei oder drei Markenfarben** Ergänze für Tiefe einen dunkleren Ton aus derselben Familie. [Markenfarben auswählen](https://gradiently.design/de/guide/how-to-choose-brand-colors) hilft dir, falls du sie noch nicht hast.
2. **Wähle eine Familie** Geometrisch, wenn deine Marke präzise oder energiegeladen ist, fließend, wenn sie ruhig oder hochwertig ist, texturiert, wenn sie handwerklich oder warm ist.
3. **Leih dir eine Form von der Marke** Eine Kurve aus dem Logo, der Winkel eines Buchstabens, ein Kreis aus einem Icon. Wenn du sie im Hintergrund wiederholst, verbindet das beides.
4. **Plane die ruhige Zone** Lege fest, wo in jedem Format der Text steht, und halte diese Fläche gleichmäßig in der Helligkeit.
5. **Füge Textur zuletzt hinzu** Eine leichte Körnung über allem, dann prüfe es in Handygröße mit echten Worten darauf.

## Den passenden abstrakten Hintergrund für die Aufgabe wählen

### Vermeide

- Kontrastreiche Muster hinter Fließtext
- Drei Arten von Abstraktion in einem Design
- Zufällige Formen ohne Bezug zur Marke
- Einen Hintergrund, der so unruhig ist, dass er zur Botschaft wird

### Mach

- Ton-in-Ton-Muster oder Muster fern von Worten
- Eine Art, mit Textur als unterstützender Ebene
- Formen und Farben, die deine Marke aufgreifen
- Einen Hintergrund, der die Stimmung setzt und dann zurücktritt

Stimme die Abstraktion auf den Inhalt ab. Eine datenlastige Folie will eine ruhige fließende oder Ton-in-Ton-Fläche. Ein Launch-Post verträgt eine kräftige geometrische Teilung. Eine Speisekarte oder ein Handwerksprodukt will Textur. Und was du auch wählst: Teste es in echter Größe mit den echten Worten darauf, denn abstrakte Hintergründe, die leer wunderschön aussehen, kämpfen oft gegen den Text, sobald er da ist.

Die Marks von Gradiently sind fließende und texturierte Abstraktion in einem: Farben, bis zu drei gestapelte Materialien, Licht, Körnung und Bewegung, live hinter deinem Design gerendert, mit ihrer ruhigsten Fläche hinter den Worten. Du kannst sie im Markt durchstöbern oder in der Forge einen eigenen Mark machen.

## FAQ

### Was ist ein abstrakter Hintergrund?

Ein Hintergrund aus Farbe, Form und Textur statt einer erkennbaren Szene. Die meisten sind geometrisch, fließend oder texturiert, oder eine Kombination.

### Wie erstelle ich einen abstrakten Hintergrund in CSS?

Nutze lineare, konische und sich wiederholende Farbverläufe mit harten Stopps für geometrische Muster und geschichtete radiale Farbverläufe für fließende Flächen. Eine SVG-Rauschebene sorgt für Textur.

### Welcher abstrakte Hintergrund eignet sich am besten für Text?

Fließende Hintergründe mit großen, gleichmäßigen Flächen sind am einfachsten, danach Ton-in-Ton-Muster. Vermeide kontrastreiche Muster hinter Worten.

### Was lässt einen abstrakten Hintergrund hochwertig wirken?

Zurückhaltung: eine begrenzte Farbpalette, weiches Licht, feine Textur und eine ruhige Fläche für den Inhalt. Unruhige, kontrastreiche Abstraktion wirkt meist billiger.