What it is
Steel blue, sand, orchid and ruby, pulled down with a negative saturation offset. The result reads closer to a printed page than a screen — muted, slightly dusty, and easy to lay type over. Use it when a full-saturation gradient would look like a crypto landing page.
Good for
Editorial layouts, long-form pages, documentation headers.
Formula
#167CB3#CB9854#CE96CE#E0115F
| Colours | 4 |
|---|---|
| Speed | 2.5 |
| Wave amplitude | 6 |
| Saturation | -3 |
| Brightness | 0.9 |
| 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: "#167CB3", enabled: true },
{ color: "#CB9854", enabled: true },
{ color: "#CE96CE", enabled: true },
{ color: "#E0115F", enabled: true },
],
speed: 2.5,
horizontalPressure: 5,
verticalPressure: 5,
waveFrequencyX: 2,
waveFrequencyY: 3,
waveAmplitude: 6,
shadows: 2,
highlights: 0,
colorBrightness: 0.9,
colorSaturation: -3,
wireframe: false,
colorBlending: 5,
backgroundColor: "#A1A4B7",
backgroundAlpha: 1,
resolution: 0.4,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 0
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#167CB3", enabled: true },
{ color: "#CB9854", enabled: true },
{ color: "#CE96CE", enabled: true },
{ color: "#E0115F", enabled: true },
{ color: "#FFFFFF", enabled: false },
{ color: "#000000", enabled: false },
],
speed: 2.5,
horizontalPressure: 5,
verticalPressure: 5,
waveFrequencyX: 2,
waveFrequencyY: 3,
waveAmplitude: 6,
shadows: 2,
highlights: 0,
colorBrightness: 0.9,
colorSaturation: -3,
wireframe: false,
colorBlending: 5,
backgroundColor: "#A1A4B7",
backgroundAlpha: 1,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 0,
resolution: 0.4,
yOffset: 28659,
yOffsetWaveMultiplier: 1,
yOffsetColorMultiplier: 4.8,
yOffsetFlowMultiplier: 5.3,
flowDistortionA: 3.7,
flowDistortionB: 0.8,
flowScale: 1.6,
flowEase: 0.32,
flowEnabled: true,
enableProceduralTexture: false,
transparentTextureVoid: true,
textureVoidLikelihood: 0.29,
textureVoidWidthMin: 120,
textureVoidWidthMax: 420,
textureBandDensity: 2.9,
textureColorBlending: 0.06,
textureSeed: 536,
textureEase: 0.93,
proceduralBackgroundColor: "#775454",
textureShapeTriangles: 48,
textureShapeCircles: 15,
textureShapeBars: 15,
textureShapeSquiggles: 27,
domainWarpEnabled: true,
domainWarpIntensity: 0.1,
domainWarpScale: 2.4,
vignetteIntensity: 0.45,
vignetteRadius: 0.55,
fresnelEnabled: false,
fresnelPower: 2.7,
fresnelIntensity: 1.3,
fresnelColor: "#F7E7CE",
iridescenceEnabled: false,
iridescenceIntensity: 0.5,
iridescenceSpeed: 1,
bloomIntensity: 1.9,
bloomThreshold: 0.6,
chromaticAberration: 17,
shapeType: "ribbon",
shapeRotationX: 0.35,
shapeRotationY: -26.78,
shapeRotationZ: -0.29,
shapeAutoRotateSpeedX: 0,
shapeAutoRotateSpeedY: 0,
sphereRadius: 15,
torusRadius: 15,
torusTube: 5,
cylinderRadius: 10,
cylinderHeight: 40,
planeBend: 2.3,
planeTwist: -2.9,
silhouetteFade: 0.83,
cylinderFade: 0.08,
ribbonFade: 0.31,
flatShading: false,
cameraLock: false,
cameraX: 0,
cameraY: 0,
cameraZ: 0,
cameraRotationX: -0.01,
cameraRotationY: -0.24,
cameraRotationZ: 0,
cameraZoom: 1
});Prefer a file? Open it in the editor and export a PNG still or an MP4 loop — see the gradient video guide.
