Zum Inhalt springen
UI Kit
Accent

3D-Hintergründe mit WebGL

Lebendige WebGL-Hintergründe mit Tiefe, von fließendem Licht und Partikelfeldern bis zu Punktkugeln, Wellenfeldern, Lichtstrahlen und einer atmenden Lichtkugel. Jeder mit Standbild als Rückfall.

6 Components · 24 Variants
Kategorie wechseln

Licht und Tiefe hinter deinem Text

Ein lebendiger Hintergrund gibt einem Hero oder dem Abschluss einer Seite Tiefe, ohne dass ein einziges Bild laden muss. Die sechs Hintergründe hier zeichnet WebGL live in der Akzentfarbe deines Themes, jeder hat ein Standbild als Rückfall und ruht als stilles Einzelbild, wenn jemand weniger Bewegung wünscht.

Der Shader-Verlauf lässt weiches Licht in Akzent und Nachbartönen fließen. Das Partikelfeld füllt die Tiefe mit leuchtenden Partikeln und etwas Parallaxe zum Zeiger. Die Punktkugel dreht einen Globus aus gleichmäßig verteilten Punkten mit Akzentfunken und Halo. Das Wellenfeld lässt eine Fläche aus Linien oder Punkten auf dich zugleiten. Die Lichtstrahlen fallen von oben mit Dunst und schwebendem Staub, und die Lichtkugel atmet als weiche Kugel aus Licht. Jeder kommt als Hero, als Band für Kennzahlen, als hervorgehobene Karte und als Fläche hinter einem Call to Action.

Nimm einen lebendigen Hintergrund pro Seite, im Hero oder am Schluss, und halte den Rest ruhig. Der Schleier unter dem Text hält ihn lesbar, Überschriften bleiben in jedem Bild scharf. Wähle nach Stimmung, Verlauf und Lichtkugel wirken ruhig, Partikel und Wellen technisch, die Strahlen wie eine Bühne.

Auf dieser Seite

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

dot-sphere

Punktkugel

Eine drehende Kugel aus gleichmäßig verteilten Punkten, mit WebGL berechnet. Helle Vorderseite, schwache Rückseite, einige Punkte leuchten im Akzent, ein Lichtkranz umgibt sie. Neigt sich mit dem Zeiger.

Props und Details · Punktkugel

Hero mit Kugel danebenNeu in 1.2

Text links, rechts dreht sich die Kugel. Am Telefon liegt sie unter dem Text.

HorizontNeu in 1.2

Eine große Kugel steigt wie ein Planet von der Unterkante auf, der Text steht darüber.

Hervorgehobene KarteNeu in 1.2

Eine Kugel ragt oben in die Ecke der hervorgehobenen Karte.

Hinter einem Call to ActionNeu in 1.2

Eine große, ruhige Kugel rahmt die Abschlussfläche, ihr Rand leuchtet um den Text.

glow-orb

Lichtkugel

Eine weiche, atmende Lichtkugel, wie eine Kugel schattiert, mit Wirbel im Inneren und weitem Schein, mit WebGL gezeichnet. Neigt sich zum Zeiger.

Props und Details · Lichtkugel

Hero mit Kugel danebenNeu in 1.2

Text links, rechts atmet die Kugel. Am Telefon liegt sie unter dem Text.

Aufgehende KugelNeu in 1.2

Die Kugel steigt halb über die Unterkante wie eine Sonne, der Text steht darüber.

Hervorgehobene KarteNeu in 1.2

Eine kleine Kugel leuchtet in der hervorgehobenen Karte, wie eine Stimme, die zuhört.

Hinter einem Call to ActionNeu in 1.2

Eine große Kugel leuchtet weich hinter der abschließenden Überschrift.

light-rays

Lichtstrahlen

Lichtschächte von oben mit Dunst und schwebendem Staub, mit WebGL gezeichnet. Sie schimmern, ohne sich zu wiederholen, die Quelle folgt leicht dem Zeiger.

Props und Details · Lichtstrahlen

Hero von obenNeu in 1.2

Licht fällt gerade auf eine mittige Überschrift, wie durch ein Oberlicht.

MorgenbandNeu in 1.2

Licht fällt schräg von rechts oben über ein Band mit Kennzahlen.

Karte im RampenlichtNeu in 1.2

Ein schmaler Strahl beleuchtet die eine Karte, auf die es ankommt.

Hinter einem Call to ActionNeu in 1.2

Ein weiter, langsamer Lichtfächer öffnet sich über der Abschlussfläche.

particle-field

Partikelfeld

Leuchtende Partikel in bis zu sechs Tiefenebenen, mit WebGL gezeichnet. Nahe groß und weich, ferne fein, der Zeiger fächert die Ebenen auf und erhellt seine Umgebung.

Props und Details · Partikelfeld

Hero mit TiefeNeu in 1.2

Ein tiefes Feld aufsteigender Partikel hinter einer mittigen Überschrift.

Treibendes BandNeu in 1.2

Partikel treiben seitlich durch ein Band mit Kennzahlen über die ganze Breite.

Hervorgehobene KarteNeu in 1.2

Ein dichtes, feines Feld in einer Karte des Rasters.

Langsames Treiben hinter einem Call to ActionNeu in 1.2

Große, langsame Partikel, die sanft um die Abschlussfläche fallen.

shader-gradient

Shader-Verlauf

Fließendes Licht in der Akzentfarbe und ihren Nachbarn, live mit WebGL gezeichnet. Faltet sich wie Seide, folgt Zeiger und Scrollen, mit Standbild als Rückfall.

Props und Details · Shader-Verlauf

Hero-HintergrundNeu in 1.2

Ein ganzer Hero-Bereich mit weichem Licht hinter einer mittigen Überschrift.

Section-BandNeu in 1.2

Ein Band über die ganze Breite mit Kennzahlen, das Licht sammelt sich rechts.

Hervorgehobene KarteNeu in 1.2

Das Licht lebt in einer Karte des Rasters und markiert die wichtigste Funktion.

Hinter einem Call to ActionNeu in 1.2

Kräftiges, ruhigeres Licht, das die Abschlussfläche einer Seite füllt.

wave-field

Wellenfeld

Eine wellige Fläche in Perspektive, mit WebGL als Linien oder Punkte gezeichnet. Gleitet auf dich zu, Kämme fangen den Akzent, der Zeiger hebt die Wellen unter sich.

Props und Details · Wellenfeld

Hero über den WellenNeu in 1.2

Der Text steht über einem Linienfeld, das auf dich zugleitet.

Gepunktetes BandNeu in 1.2

Ein flaches Punktfeld unter einem Band mit Kennzahlen über die ganze Breite.

Hervorgehobene KarteNeu in 1.2

Hohe Wellen füllen die hervorgehobene Karte wie eine Schallwelle.

Hinter einem Call to ActionNeu in 1.2

Ein ruhiges Meer aus Punkten reicht bis zur Mitte der Abschlussfläche.

Ähnliche Components

Mehr aus Visuals, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben 3D-Hintergründe stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert