What it is
One of the fastest presets, mixing rust, cyan, gold and violet with a pure white in the palette. That white is what gives it the liquid-metal highlight as shapes pass over each other.
Good for
Attention-grabbing headers, short-lived campaign pages.
Formula
#A24141#17E7FF#FFC600#8B6AE6#FFFFFF#FF75B5
| Colours | 6 |
|---|---|
| Speed | 4.5 |
| Wave amplitude | 6 |
| Saturation | 0 |
| Brightness | 1 |
| Grain | 4 |
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: "#A24141", enabled: true },
{ color: "#17E7FF", enabled: true },
{ color: "#FFC600", enabled: true },
{ color: "#8B6AE6", enabled: true },
{ color: "#FFFFFF", enabled: true },
{ color: "#FF75B5", enabled: true },
],
speed: 4.5,
horizontalPressure: 3,
verticalPressure: 4,
waveFrequencyX: 2.5,
waveFrequencyY: 2.5,
waveAmplitude: 6,
shadows: 10,
highlights: 1,
colorBrightness: 1,
colorSaturation: 0,
wireframe: false,
colorBlending: 3,
backgroundColor: "#E4E4E4",
backgroundAlpha: 1,
resolution: 0.9,
grainScale: 4,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 0.5
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#A24141", enabled: true },
{ color: "#17E7FF", enabled: true },
{ color: "#FFC600", enabled: true },
{ color: "#8B6AE6", enabled: true },
{ color: "#FFFFFF", enabled: true },
{ color: "#FF75B5", enabled: true },
],
speed: 4.5,
horizontalPressure: 3,
verticalPressure: 4,
waveFrequencyX: 2.5,
waveFrequencyY: 2.5,
waveAmplitude: 6,
shadows: 10,
highlights: 1,
colorBrightness: 1,
colorSaturation: 0,
wireframe: false,
colorBlending: 3,
backgroundColor: "#E4E4E4",
backgroundAlpha: 1,
grainScale: 4,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 0.5,
resolution: 0.9,
yOffset: 63161,
yOffsetWaveMultiplier: 4,
yOffsetColorMultiplier: 4,
yOffsetFlowMultiplier: 10,
flowDistortionA: 1.2,
flowDistortionB: 1.8,
flowScale: 1.5,
flowEase: 0.25,
flowEnabled: false,
enableProceduralTexture: false,
transparentTextureVoid: false,
textureVoidLikelihood: 0.27,
textureVoidWidthMin: 60,
textureVoidWidthMax: 420,
textureBandDensity: 1.2,
textureColorBlending: 0.06,
textureSeed: 333,
textureEase: 0.5,
proceduralBackgroundColor: "#0E0707",
textureShapeTriangles: 20,
textureShapeCircles: 15,
textureShapeBars: 15,
textureShapeSquiggles: 10,
domainWarpEnabled: false,
domainWarpIntensity: 0,
domainWarpScale: 3,
vignetteIntensity: 0.25,
vignetteRadius: 0.35,
fresnelEnabled: false,
fresnelPower: 1.3,
fresnelIntensity: 0,
fresnelColor: "#ffffff",
iridescenceEnabled: false,
iridescenceIntensity: 0.8,
iridescenceSpeed: 1.5,
bloomIntensity: 0.1,
bloomThreshold: 0.1,
chromaticAberration: 3,
shapeType: "sphere",
shapeRotationX: -2.49,
shapeRotationY: -0.89,
shapeRotationZ: 0,
shapeAutoRotateSpeedX: 1,
shapeAutoRotateSpeedY: 1.2,
sphereRadius: 21,
torusRadius: 15,
torusTube: 5,
cylinderRadius: 10,
cylinderHeight: 40,
planeBend: 0,
planeTwist: 0,
silhouetteFade: 0.55,
cylinderFade: 0.08,
ribbonFade: 0.05,
flatShading: false,
cameraLock: false,
cameraX: 22.5,
cameraY: 0,
cameraZ: 0,
cameraRotationX: 0.86,
cameraRotationY: -0.01,
cameraRotationZ: 0,
cameraZoom: 2.6
});Prefer a file? Open it in the editor and export a PNG still or an MP4 loop — see the gradient video guide.
