What it is
Lilac, pink and pale blue with saturation pulled well down and low amplitude. Quiet enough to sit behind a full page of content without needing an overlay.
Good for
Wellness, beauty, lifestyle, soft-brand sites.
Formula
#E3D1E6#ffc8dd#ffafcc#C5E2FF
| Colours | 4 |
|---|---|
| Speed | 4.5 |
| Wave amplitude | 3 |
| Saturation | -4 |
| 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: "#E3D1E6", enabled: true },
{ color: "#ffc8dd", enabled: true },
{ color: "#ffafcc", enabled: true },
{ color: "#C5E2FF", enabled: true },
],
speed: 4.5,
horizontalPressure: 6,
verticalPressure: 6,
waveFrequencyX: 3,
waveFrequencyY: 3,
waveAmplitude: 3,
shadows: 2,
highlights: 3,
colorBrightness: 1,
colorSaturation: -4,
wireframe: true,
colorBlending: 6,
backgroundColor: "#FF9D9D",
backgroundAlpha: 1,
resolution: 0.4,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 0
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#E3D1E6", enabled: true },
{ color: "#ffc8dd", enabled: true },
{ color: "#ffafcc", enabled: true },
{ color: "#C5E2FF", enabled: true },
{ color: "#00B3FF", enabled: false },
],
speed: 4.5,
horizontalPressure: 6,
verticalPressure: 6,
waveFrequencyX: 3,
waveFrequencyY: 3,
waveAmplitude: 3,
shadows: 2,
highlights: 3,
colorBrightness: 1,
colorSaturation: -4,
wireframe: true,
colorBlending: 6,
backgroundColor: "#FF9D9D",
backgroundAlpha: 1,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 0,
resolution: 0.4,
yOffset: 53047,
yOffsetWaveMultiplier: 10.9,
yOffsetColorMultiplier: 3.8,
yOffsetFlowMultiplier: 6.2,
flowDistortionA: 2.8,
flowDistortionB: 2.4,
flowScale: 1.5,
flowEase: 0.41,
flowEnabled: false,
enableProceduralTexture: false,
textureVoidLikelihood: 0.06,
textureVoidWidthMin: 10,
textureVoidWidthMax: 500,
textureBandDensity: 0.8,
textureColorBlending: 0.06,
textureSeed: 333,
textureEase: 0.72,
proceduralBackgroundColor: "#FFED00",
textureShapeTriangles: 20,
textureShapeCircles: 15,
textureShapeBars: 15,
textureShapeSquiggles: 10,
domainWarpEnabled: false,
domainWarpIntensity: 0,
domainWarpScale: 3,
vignetteIntensity: 0.3,
vignetteRadius: 0.6,
fresnelEnabled: true,
fresnelPower: 2,
fresnelIntensity: 0.2,
fresnelColor: "#FF0000",
iridescenceEnabled: false,
iridescenceIntensity: 0.8,
iridescenceSpeed: 1,
bloomIntensity: 0.4,
bloomThreshold: 0.7,
chromaticAberration: 9,
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.
