Zum Inhalt springen
UI Kit
Accent

Animierte Hintergründe für Sections

Aurora, Gradient Mesh, Noise, leuchtende Punkte, auslaufende Raster und ein Spotlight, das dem Zeiger folgt.

6 Components · 19 Variants
Kategorie wechseln

Licht und Struktur hinter dem Inhalt

Ein Hintergrund setzt die Stimmung einer Section, ohne Aufmerksamkeit zu fordern. Die sechs Components hier liegen hinter deinem Inhalt, nehmen die Akzentfarbe des Kits und bleiben im Light Mode ruhig und im Dark Mode leuchtend, mit Bewegung, die bei reduzierter Bewegung anhält.

Farbverlauf und Polarlicht geben einem Hero sanfte Farbe, still oder langsam treibend. „Körnung“ legt ein feines Korn darüber, die Verläufen das Plastische nimmt. „Leuchtende Punkte“ lässt Punkte nahe am Zeiger oder in einer Welle aufleuchten, „Raster mit Verlauf“ zeichnet ein Linien- oder Kachelraster, das zu den Rändern ausläuft. „Folgendes Licht“ bewegt ein Licht mit dem Zeiger und ruht auf Touchscreens in der Mitte.

Kontrast geht vor, prüf deine Headline über der hellsten Stelle des Hintergrunds. Nimm einen bewegten Hintergrund je Seite. Alle bestehen aus CSS und SVG und sind leicht genug für jede Leitung, Partikel und Canvas gehören trotzdem in den Hero, nicht hinter jede Section.

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

gradient-mesh

Farbverlauf

Geschichtete Radialverläufe in Akzenttönen, ruhend oder langsam ziehend.

Props und Details · Farbverlauf

Weiche Wolke

Eine blasse Tonwolke hinter der Mitte, ruhig genug für Gesundheit und Pflege.

Kräftig

Überlappende Töne füllen die Bühne und ziehen, der Farbton dreht sich leicht.

Ecken

Licht in zwei gegenüberliegenden Ecken, der Text steht in einer klaren Mitte. Ruhend.

Horizont

Die Töne steigen von der Unterkante auf wie ein früher Himmel.

aurora

Polarlicht

Weiche Lichtschleier in der Akzentfarbe, die langsam ziehen. Hell zurückhaltend, dunkel leuchtend.

Props und Details · Polarlicht

Sanft von oben

Ein leises Licht hängt von der Oberkante, gemacht für Ankündigungen.

Kräftig in der Mitte

Kräftigere Schleier hinter der Überschrift für einen Produkt-Teaser.

Horizont

Das Licht steigt von der Unterkante auf wie ein Morgenhimmel.

dot-glow

Leuchtende Punkte

Ein Punktfeld, dessen Punkte in der Akzentfarbe aufleuchten, am Zeiger oder in einer wandernden Welle.

Props und Details · Leuchtende Punkte

Folgt dem Zeiger

Punkte am Zeiger leuchten. Ohne Zeiger wandert das Licht langsam von selbst.

Welle

Ein schräges Lichtband zieht über das Feld und läuft beim Scrollen weiter.

Kreise

Ruhige Ringe breiten sich aus der Mitte aus, wie ein Atemzug.

grid-fade

Raster mit Verlauf

Ein Linien- oder Kachelraster, das ausblendet, mit Feldern, die in der Akzentfarbe aufleuchten.

Props und Details · Raster mit Verlauf

Linien mit Puls

Haarlinien durch die Mitte setzen sich beim Hochscrollen an ihren Platz, einige Felder pulsieren langsam.

Kacheln

Gerundete Kacheln mit kleinen Fugen, hervorgehobene in der Akzentfarbe.

Gestrichelt von oben

Ein leises gestricheltes Raster wie Zeichenpapier, das nach unten ausläuft.

noise

Körnung

Eine Körnung aus einer SVG-Turbulenz, die Verläufen und Akzentflächen das Glatte nimmt.

Props und Details · Körnung

Feine Körnung

Feines Korn über einem Farbverlauf, wie Papier im Licht.

Filmkorn

Gröberes Korn, das wie Film flimmert. Steht still bei reduzierter Bewegung.

Auf einer Akzentkarte

Korn in der Kontrastfarbe auf einer vollen Akzentfläche, sanft eingemischt.

spotlight-follow

Folgendes Licht

Eine Bühne, deren Licht dem Zeiger folgt und auf Touch-Geräten in der Mitte ruht.

Props und Details · Folgendes Licht

Weiches Licht

Reines Licht ohne Muster, ruhig genug für eine Kanzlei.

Raster unter dem Licht

Das Licht legt ein Raster in der Akzentfarbe frei.

Punkte unter dem Licht

Ein breiteres Licht über einem Punktfeld, etwas höher in Ruhe.

Ähnliche Components

Mehr aus Elements, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Backgrounds stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert