What it is
Red, sky blue, amber and violet at full wave amplitude — the sweeping multi-hue look that a generation of payment and infrastructure companies made standard. Slightly brightened so it stays clean behind white type.
Good for
SaaS, fintech, B2B landing pages.
Formula
#FD113F#90E0FF#FFC858#753BFF
| Colours | 4 |
|---|---|
| Speed | 2 |
| Wave amplitude | 10 |
| Saturation | 0 |
| Brightness | 1.05 |
| 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: "#FD113F", enabled: true },
{ color: "#90E0FF", enabled: true },
{ color: "#FFC858", enabled: true },
{ color: "#753BFF", enabled: true },
],
speed: 2,
horizontalPressure: 5,
verticalPressure: 6,
waveFrequencyX: 1,
waveFrequencyY: 2,
waveAmplitude: 10,
shadows: 0,
highlights: 7,
colorBrightness: 1.05,
colorSaturation: 0,
wireframe: false,
colorBlending: 9,
backgroundColor: "#003FFF",
backgroundAlpha: 1,
resolution: 1,
grainScale: 0,
grainIntensity: 0,
grainSpeed: 0
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#FD113F", enabled: true },
{ color: "#90E0FF", enabled: true },
{ color: "#FFC858", enabled: true },
{ color: "#753BFF", enabled: true },
{ color: "#f5e1e5", enabled: false },
{ color: "#B8D4E6", enabled: false },
],
speed: 2,
horizontalPressure: 5,
verticalPressure: 6,
waveFrequencyX: 1,
waveFrequencyY: 2,
waveAmplitude: 10,
shadows: 0,
highlights: 7,
colorBrightness: 1.05,
colorSaturation: 0,
wireframe: false,
colorBlending: 9,
backgroundColor: "#003FFF",
backgroundAlpha: 1,
grainScale: 0,
grainIntensity: 0,
grainSpeed: 0,
resolution: 1,
yOffsetWaveMultiplier: 6.5,
yOffsetColorMultiplier: 5,
yOffsetFlowMultiplier: 3,
enableProceduralTexture: false,
textureEase: 0.4,
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.
