Abstrakter Hintergrund: Formen, Flächen und Fluss

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.

Drei Arten abstrakter Hintergründe

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. In CSS erzeugen harte Farbstopps (zwei Farben an derselben Position) die Kanten.

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.

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.

.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%);
}

Fließende Hintergründe gibt es in benannten Stilen: Mesh-Verläufe mischen mehrere Farbpunkte über eine Fläche, und Aurora-Verläufe 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.

Halte Textur dezent, wenn Text darüberliegt: genug, um auf Armlänge zu wirken, aber nicht so viel, dass Buchstaben schmutzig aussehen. Hintergrundtextur behandelt Körnung, Papier, Stoff und Glas im Detail, und körnige Farbverläufe 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. 1

   Nimm zwei oder drei Markenfarben

   Ergänze für Tiefe einen dunkleren Ton aus derselben Familie. Markenfarben auswählen hilft dir, falls du sie noch nicht hast.

2. 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. 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. 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. 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

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.