What it is
The FireCMS palette — coral, amber, cyan and violet — with colour saturation at the top of its range. A useful reference for what the saturation control actually does when you push it all the way.
Good for
Brand pages, SaaS marketing sites.
Formula
#FF5373#FFC858#17E7FF#6D3BFF
| Colours | 4 |
|---|---|
| Speed | 2 |
| Wave amplitude | 5 |
| Saturation | 10 |
| 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: "#FF5373", enabled: true },
{ color: "#FFC858", enabled: true },
{ color: "#17E7FF", enabled: true },
{ color: "#6D3BFF", enabled: true },
],
speed: 2,
horizontalPressure: 2,
verticalPressure: 5,
waveFrequencyX: 2,
waveFrequencyY: 2,
waveAmplitude: 5,
shadows: 10,
highlights: 8,
colorBrightness: 1,
colorSaturation: 10,
wireframe: true,
colorBlending: 6,
backgroundColor: "#003FFF",
backgroundAlpha: 1,
resolution: 0.95,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 0
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#FF5373", enabled: true },
{ color: "#FFC858", enabled: true },
{ color: "#17E7FF", enabled: true },
{ color: "#6D3BFF", enabled: true },
{ color: "#f5e1e5", enabled: false },
{ color: "#A8E6CF", enabled: false },
],
speed: 2,
horizontalPressure: 2,
verticalPressure: 5,
waveFrequencyX: 2,
waveFrequencyY: 2,
waveAmplitude: 5,
shadows: 10,
highlights: 8,
colorBrightness: 1,
colorSaturation: 10,
wireframe: true,
colorBlending: 6,
backgroundColor: "#003FFF",
backgroundAlpha: 1,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 0,
resolution: 0.95,
yOffsetWaveMultiplier: 3.5,
yOffsetColorMultiplier: 3.5,
yOffsetFlowMultiplier: 3.5,
enableProceduralTexture: false,
textureEase: 0.6,
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.
