What it is
Silver, lilac, blush and yellow drifting slowly with a light grain — the petrol-on-water look. Low contrast by design; it is meant to be noticed second, after the content.
Good for
Premium packaging-inspired sites, fashion, understated brand pages.
Formula
#D6D4D1#C6A8F0#FFC3DA#FFF700
| Colours | 4 |
|---|---|
| Speed | 1.5 |
| Wave amplitude | 4 |
| Saturation | 1 |
| Brightness | 1.02 |
| Grain | 1 |
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: "#D6D4D1", enabled: true },
{ color: "#C6A8F0", enabled: true },
{ color: "#FFC3DA", enabled: true },
{ color: "#FFF700", enabled: true },
],
speed: 1.5,
horizontalPressure: 4.6,
verticalPressure: 4.6,
waveFrequencyX: 1.5,
waveFrequencyY: 1.5,
waveAmplitude: 4,
shadows: 0,
highlights: 1,
colorBrightness: 1.02,
colorSaturation: 1,
wireframe: false,
colorBlending: 4.8,
backgroundColor: "#D6D4D1",
backgroundAlpha: 1,
resolution: 1,
grainScale: 1,
grainSparsity: 0,
grainIntensity: 0.08,
grainSpeed: 0.05
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#D6D4D1", enabled: true },
{ color: "#C6A8F0", enabled: true },
{ color: "#FFC3DA", enabled: true },
{ color: "#FFF700", enabled: true },
{ color: "#FFE7A6", enabled: false },
{ color: "#A8EDE4", enabled: false },
],
speed: 1.5,
horizontalPressure: 4.6,
verticalPressure: 4.6,
waveFrequencyX: 1.5,
waveFrequencyY: 1.5,
waveAmplitude: 4,
secondaryWaveEnabled: true,
secondaryWaveFrequencyX: 2.6,
secondaryWaveFrequencyY: 1.4,
secondaryWaveAmplitude: 6,
secondaryWaveSpeed: 0.45,
secondaryWaveAngle: 1.15,
shadows: 0,
highlights: 1,
colorBrightness: 1.02,
colorSaturation: 1,
wireframe: false,
colorBlending: 4.8,
backgroundColor: "#D6D4D1",
backgroundAlpha: 1,
grainScale: 1,
grainSparsity: 0,
grainIntensity: 0.08,
grainSpeed: 0.05,
resolution: 1,
yOffsetWaveMultiplier: 4,
yOffsetColorMultiplier: 4,
yOffsetFlowMultiplier: 4,
flowEnabled: true,
flowDistortionA: 0.6,
flowDistortionB: 1.2,
flowScale: 1.2,
flowEase: 0.15,
prismEdgeEnabled: true,
prismEdgeIntensity: 0.45,
prismEdgeThinness: 4,
prismEdgeSpread: 1.2,
prismEdgeRipple: 0.8,
prismEdgeSpeed: 0.35,
enableProceduralTexture: false,
textureEase: 0.5,
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.
