What it is
Electric blue, amber and cyan on a flat plane at raised brightness. No displacement, so the colour transitions stay broad and smooth instead of folding into ridges.
Good for
Clean product pages, app store screenshots, feature sections.
Formula
#3B00FF#FFC858#17E7FF#215BFF#D8A50C
| Colours | 5 |
|---|---|
| Speed | 4 |
| Wave amplitude | 1 |
| Saturation | 0 |
| Brightness | 1.15 |
| 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: "#3B00FF", enabled: true },
{ color: "#FFC858", enabled: true },
{ color: "#17E7FF", enabled: true },
{ color: "#215BFF", enabled: true },
{ color: "#D8A50C", enabled: true },
],
speed: 4,
horizontalPressure: 4,
verticalPressure: 6,
waveFrequencyX: 1,
waveFrequencyY: 1,
waveAmplitude: 1,
shadows: 3,
highlights: 0,
colorBrightness: 1.15,
colorSaturation: 0,
wireframe: false,
colorBlending: 4,
backgroundColor: "#003FFF",
backgroundAlpha: 1,
resolution: 1,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 0
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#3B00FF", enabled: true },
{ color: "#FFC858", enabled: true },
{ color: "#17E7FF", enabled: true },
{ color: "#215BFF", enabled: true },
{ color: "#D8A50C", enabled: true },
],
speed: 4,
horizontalPressure: 4,
verticalPressure: 6,
waveFrequencyX: 1,
waveFrequencyY: 1,
waveAmplitude: 1,
shadows: 3,
highlights: 0,
colorBrightness: 1.15,
colorSaturation: 0,
wireframe: false,
colorBlending: 4,
backgroundColor: "#003FFF",
backgroundAlpha: 1,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 0,
resolution: 1,
yOffset: 7089,
yOffsetWaveMultiplier: 3.2,
yOffsetColorMultiplier: 3.5,
yOffsetFlowMultiplier: 4,
flowDistortionA: 3.1,
flowDistortionB: 2.4,
flowScale: 1.5,
flowEase: 0.31,
flowEnabled: true,
enableProceduralTexture: false,
textureVoidLikelihood: 0.06,
textureVoidWidthMin: 10,
textureVoidWidthMax: 500,
textureBandDensity: 0.8,
textureColorBlending: 0.06,
textureSeed: 333,
textureEase: 0.65,
proceduralBackgroundColor: "#FFED00",
textureShapeTriangles: 20,
textureShapeCircles: 15,
textureShapeBars: 15,
textureShapeSquiggles: 10,
domainWarpEnabled: false,
domainWarpIntensity: 0.6,
domainWarpScale: 3,
vignetteIntensity: 0.85,
vignetteRadius: 0.65,
fresnelEnabled: true,
fresnelPower: 3.7,
fresnelIntensity: 0.7,
fresnelColor: "#FF0000",
iridescenceEnabled: true,
iridescenceIntensity: 0.35,
iridescenceSpeed: 3.9,
bloomIntensity: 0.8,
bloomThreshold: 0.9,
chromaticAberration: 4,
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.
