Grain Gradient Field

Grain Gradient Field
Grain Gradient Field

About Grain Gradient Field

Four soft colour fields drift slowly over a base tone to make a living mesh gradient, finished with an optional fine grain layer. A calm, premium background for a hero, a section or a full page.

What you can set:

  • Palette: eight curated sets (Rice Paper, Night Ink, Vermilion, Jade, Dusk, Ember, Sea Glass, Mono) or your own base and four field colours

  • Field: speed, intensity and spread

  • Grain: strength and size

  • Extras: corner radius and an optional soft light that follows the pointer

Good to know:

  • Only transforms animate, so it stays smooth and light.

  • Visitors who prefer reduced motion get a still gradient.

  • It fills its frame, so set it to fill a section or the whole page.

From QilinMoon

Marquee Ticker
Scroll Progress Line
Pinned Card Stack
Scroll Count Up

Related Components

Interaction Lines BG
7 Noise Overlays
Perspective Tiles
Tile grid background