What it is
Aqua, cream, periwinkle and blush at high saturation with gentle displacement. Light overall, and one of the few presets that stays legible with dark text on top without an overlay.
Good for
Light-theme sites, beauty, hospitality.
Formula
#00FFFF#FFECCE#926EFF#FFD8D1
| Colours | 4 |
|---|---|
| Speed | 2.5 |
| Wave amplitude | 3 |
| Saturation | 7 |
| 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: "#00FFFF", enabled: true },
{ color: "#FFECCE", enabled: true },
{ color: "#926EFF", enabled: true },
{ color: "#FFD8D1", enabled: true },
],
speed: 2.5,
horizontalPressure: 7,
verticalPressure: 7,
waveFrequencyX: 5,
waveFrequencyY: 5,
waveAmplitude: 3,
shadows: 2,
highlights: 3,
colorBrightness: 1,
colorSaturation: 7,
wireframe: false,
colorBlending: 8,
backgroundColor: "#F3F3F3",
backgroundAlpha: 1,
resolution: 0.55,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 1
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#00FFFF", enabled: true },
{ color: "#FFECCE", enabled: true },
{ color: "#FDEBAE", enabled: false },
{ color: "#926EFF", enabled: true },
{ color: "#FFD8D1", enabled: true },
{ color: "#00FFFF", enabled: false },
],
speed: 2.5,
horizontalPressure: 7,
verticalPressure: 7,
waveFrequencyX: 5,
waveFrequencyY: 5,
waveAmplitude: 3,
shadows: 2,
highlights: 3,
colorBrightness: 1,
colorSaturation: 7,
wireframe: false,
antialias: false,
colorBlending: 8,
backgroundColor: "#F3F3F3",
backgroundAlpha: 1,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 1,
resolution: 0.55,
yOffset: 26639,
yOffsetWaveMultiplier: 4,
yOffsetColorMultiplier: 4,
yOffsetFlowMultiplier: 4,
flowDistortionA: 0,
flowDistortionB: 0,
flowScale: 1,
flowEase: 0,
flowEnabled: true,
enableProceduralTexture: false,
transparentTextureVoid: false,
textureMode: "bitmap",
bakeEdgeSoftness: 1,
textureVoidLikelihood: 0.45,
textureVoidWidthMin: 200,
textureVoidWidthMax: 486,
textureBandDensity: 2.15,
textureColorBlending: 0.01,
textureSeed: 333,
textureEase: 0.5,
proceduralBackgroundColor: "#000000",
textureShapeTriangles: 20,
textureShapeCircles: 15,
textureShapeBars: 15,
textureShapeSquiggles: 10,
domainWarpEnabled: false,
domainWarpIntensity: 0,
domainWarpScale: 3,
vignetteIntensity: 0,
vignetteRadius: 0.8,
fresnelEnabled: false,
fresnelPower: 1.1,
fresnelIntensity: 1.8,
fresnelColor: "#FFD5BD",
iridescenceEnabled: true,
iridescenceIntensity: 0.2,
iridescenceSpeed: 1.6,
bloomIntensity: 0.2,
bloomThreshold: 0.65,
chromaticAberration: 4.5,
shapeType: "ribbon",
shapeRotationX: 0,
shapeRotationY: 0,
shapeRotationZ: 0,
shapeAutoRotateSpeedX: 0,
shapeAutoRotateSpeedY: 0,
sphereRadius: 15,
torusRadius: 15,
torusTube: 5,
cylinderRadius: 10,
cylinderHeight: 40,
planeBend: -0.1,
planeTwist: -5,
silhouetteFade: 0.45,
cylinderFade: 0.08,
ribbonFade: 0.1,
flatShading: true,
cameraLock: false,
cameraX: 0,
cameraY: 0,
cameraZ: 0,
cameraRotationX: 3.97,
cameraRotationY: -0.47,
cameraRotationZ: 0,
cameraZoom: 1.95
});Prefer a file? Open it in the editor and export a PNG still or an MP4 loop — see the gradient video guide.
