What it is
Wave amplitude is set to zero, so there is no 3D displacement at all — just colour drifting slowly across a flat plane, with a light grain pass on top. Sage, rust and slate keep it quiet. The closest thing in the set to frosted glass.
Good for
Backgrounds behind dense UI, dashboards, anything where motion should not compete.
Formula
#899D99#5f2727#373c38#0099bb#303B42#2E7075
| Colours | 6 |
|---|---|
| Speed | 1.5 |
| Wave amplitude | 0 |
| Saturation | 0 |
| Brightness | 1 |
| Grain | 2 |
Use this preset
Install the package and pass the config straight to the constructor. These are the values that shape this preset; everything else stays at its default.
npm install @firecms/neatimport { NeatGradient } from "@firecms/neat";
const gradient = new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#899D99", enabled: true },
{ color: "#5f2727", enabled: true },
{ color: "#373c38", enabled: true },
{ color: "#0099bb", enabled: true },
{ color: "#303B42", enabled: true },
{ color: "#2E7075", enabled: true },
],
speed: 1.5,
horizontalPressure: 5,
verticalPressure: 4,
waveFrequencyX: 4,
waveFrequencyY: 5,
waveAmplitude: 0,
shadows: 4,
highlights: 4,
colorBrightness: 1,
colorSaturation: 0,
wireframe: true,
colorBlending: 3,
backgroundColor: "#202020",
backgroundAlpha: 0.95,
resolution: 0.7,
grainScale: 2,
grainSparsity: 0,
grainIntensity: 0.57,
grainSpeed: 0.1
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#899D99", enabled: true },
{ color: "#5f2727", enabled: true },
{ color: "#373c38", enabled: true },
{ color: "#0099bb", enabled: true },
{ color: "#303B42", enabled: true },
{ color: "#2E7075", enabled: true },
],
speed: 1.5,
horizontalPressure: 5,
verticalPressure: 4,
waveFrequencyX: 4,
waveFrequencyY: 5,
waveAmplitude: 0,
shadows: 4,
highlights: 4,
colorBrightness: 1,
colorSaturation: 0,
wireframe: true,
colorBlending: 3,
backgroundColor: "#202020",
backgroundAlpha: 0.95,
grainScale: 2,
grainSparsity: 0,
grainIntensity: 0.57,
grainSpeed: 0.1,
resolution: 0.7,
yOffset: 0,
flowDistortionA: 3.7,
flowDistortionB: 1.4,
flowScale: 2.9,
flowEase: 0.32,
flowEnabled: true,
enableProceduralTexture: true,
textureVoidLikelihood: 0.27,
textureVoidWidthMin: 60,
textureVoidWidthMax: 420,
textureBandDensity: 1.2,
textureColorBlending: 0.06,
textureSeed: 333,
textureEase: 1,
proceduralBackgroundColor: "#0E0707",
textureShapeTriangles: 20,
textureShapeCircles: 15,
textureShapeBars: 15,
textureShapeSquiggles: 10,
yOffsetWaveMultiplier: 5.5,
yOffsetColorMultiplier: 5.2,
yOffsetFlowMultiplier: 6,
silhouetteFade: 0.25,
cylinderFade: 0.08,
ribbonFade: 0.05,
shapeType: "plane",
cameraLock: true
});Prefer a file? Open it in the editor and export a PNG still or an MP4 loop — see the gradient video guide.
