What it is
Blacks with navy and purple undertones and very low amplitude. From a distance it reads as a flat dark background; up close there is just enough movement and colour variance to stop it feeling like a dead `#000`.
Good for
Dark UI shells, developer tools, dashboards, app backgrounds.
Formula
#000000#001129#0F0025#14080A#001129
| Colours | 5 |
|---|---|
| Speed | 2 |
| Wave amplitude | 1 |
| Saturation | -1 |
| 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: "#000000", enabled: true },
{ color: "#001129", enabled: true },
{ color: "#0F0025", enabled: true },
{ color: "#14080A", enabled: true },
{ color: "#001129", enabled: true },
],
speed: 2,
horizontalPressure: 4,
verticalPressure: 4,
waveFrequencyX: 3,
waveFrequencyY: 2,
waveAmplitude: 1,
shadows: 2,
highlights: 2,
colorBrightness: 1,
colorSaturation: -1,
wireframe: false,
colorBlending: 7,
backgroundColor: "#010101",
backgroundAlpha: 1,
resolution: 0.75,
grainScale: 2,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 1
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#000000", enabled: true },
{ color: "#001129", enabled: true },
{ color: "#0F0025", enabled: true },
{ color: "#14080A", enabled: true },
{ color: "#001129", enabled: true },
],
speed: 2,
horizontalPressure: 4,
verticalPressure: 4,
waveFrequencyX: 3,
waveFrequencyY: 2,
waveAmplitude: 1,
shadows: 2,
highlights: 2,
colorBrightness: 1,
colorSaturation: -1,
wireframe: false,
colorBlending: 7,
backgroundColor: "#010101",
backgroundAlpha: 1,
grainScale: 2,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 1,
resolution: 0.75,
yOffset: 0,
yOffsetWaveMultiplier: 2.2,
yOffsetColorMultiplier: 2.5,
yOffsetFlowMultiplier: 2.8,
enableProceduralTexture: false,
textureEase: 0.68,
flowEnabled: false,
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.
