What it is
The default Neat gradient, and the one most people recognise. Six colours — coral, teal, gold, violet, deep indigo and blush — folded together at a moderate wave speed so no single hue dominates for long. It is a good neutral starting point: bright enough for a landing page hero, busy enough to hide a logo lockup without fighting it.
Good for
Hero sections, product launch pages, anything that needs colour without a theme.
Formula
#FF5772#4CB4BB#FFC600#8B6AE6#2E0EC7#FF9A9E
| Colours | 6 |
|---|---|
| Speed | 2.5 |
| Wave amplitude | 5 |
| Saturation | 7 |
| Brightness | 1 |
| Grain | 0 |
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: "#FF5772", enabled: true },
{ color: "#4CB4BB", enabled: true },
{ color: "#FFC600", enabled: true },
{ color: "#8B6AE6", enabled: true },
{ color: "#2E0EC7", enabled: true },
{ color: "#FF9A9E", enabled: true },
],
speed: 2.5,
horizontalPressure: 3,
verticalPressure: 4,
waveFrequencyX: 2,
waveFrequencyY: 3,
waveAmplitude: 5,
shadows: 1,
highlights: 5,
colorBrightness: 1,
colorSaturation: 7,
wireframe: false,
colorBlending: 8,
backgroundColor: "#003FFF",
backgroundAlpha: 1,
resolution: 1,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 1
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#FF5772", enabled: true },
{ color: "#4CB4BB", enabled: true },
{ color: "#FFC600", enabled: true },
{ color: "#8B6AE6", enabled: true },
{ color: "#2E0EC7", enabled: true },
{ color: "#FF9A9E", enabled: true },
],
speed: 2.5,
horizontalPressure: 3,
verticalPressure: 4,
waveFrequencyX: 2,
waveFrequencyY: 3,
waveAmplitude: 5,
shadows: 1,
highlights: 5,
colorBrightness: 1,
colorSaturation: 7,
wireframe: false,
colorBlending: 8,
backgroundColor: "#003FFF",
backgroundAlpha: 1,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 1,
resolution: 1,
yOffsetWaveMultiplier: 4,
yOffsetColorMultiplier: 4,
yOffsetFlowMultiplier: 4,
enableProceduralTexture: false,
textureEase: 0.5,
flowEnabled: true,
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.
