What it is
A flat plane — no wave displacement — running navy, teal and pale blue against coral and crimson at high saturation. The absence of displacement makes it feel like a printed colour field rather than a 3D surface.
Good for
Editorial covers, publications, poster-style layouts.
Formula
#0b3954#087e8b#bfd7ea#ff5a5f#c81d25
| Colours | 5 |
|---|---|
| Speed | 4 |
| Wave amplitude | 0 |
| Saturation | 8 |
| 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: "#0b3954", enabled: true },
{ color: "#087e8b", enabled: true },
{ color: "#bfd7ea", enabled: true },
{ color: "#ff5a5f", enabled: true },
{ color: "#c81d25", enabled: true },
],
speed: 4,
horizontalPressure: 4,
verticalPressure: 3,
waveFrequencyX: 0,
waveFrequencyY: 0,
waveAmplitude: 0,
shadows: 2,
highlights: 7,
colorBrightness: 1,
colorSaturation: 8,
wireframe: false,
colorBlending: 5,
backgroundColor: "#FF0000",
backgroundAlpha: 1,
resolution: 0.5,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 0
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#0b3954", enabled: true },
{ color: "#087e8b", enabled: true },
{ color: "#bfd7ea", enabled: true },
{ color: "#ff5a5f", enabled: true },
{ color: "#c81d25", enabled: true },
{ color: "#A8E6CF", enabled: false },
],
speed: 4,
horizontalPressure: 4,
verticalPressure: 3,
waveFrequencyX: 0,
waveFrequencyY: 0,
waveAmplitude: 0,
shadows: 2,
highlights: 7,
colorBrightness: 1,
colorSaturation: 8,
wireframe: false,
colorBlending: 5,
backgroundColor: "#FF0000",
backgroundAlpha: 1,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 0,
resolution: 0.5,
yOffsetWaveMultiplier: 1.5,
yOffsetColorMultiplier: 1.8,
yOffsetFlowMultiplier: 2,
enableProceduralTexture: false,
textureEase: 0.75,
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.
