What it is
Hot pink and cyan against a near-black base, with sulphur yellow cutting through. Grain is turned well up. Low amplitude keeps the shapes tight rather than sweeping, which suits the high-contrast palette.
Good for
Music, gaming, nightlife, anything that wants to look slightly toxic.
Formula
#FB5066#00EFFF#0F0635#8B6AE6#0F0635#FBFF00
| Colours | 6 |
|---|---|
| Speed | 2 |
| Wave amplitude | 2 |
| Saturation | 3 |
| Brightness | 1.05 |
| Grain | 5 |
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: "#FB5066", enabled: true },
{ color: "#00EFFF", enabled: true },
{ color: "#0F0635", enabled: true },
{ color: "#8B6AE6", enabled: true },
{ color: "#0F0635", enabled: true },
{ color: "#FBFF00", enabled: true },
],
speed: 2,
horizontalPressure: 3,
verticalPressure: 3,
waveFrequencyX: 1,
waveFrequencyY: 0,
waveAmplitude: 2,
shadows: 2,
highlights: 6,
colorBrightness: 1.05,
colorSaturation: 3,
wireframe: false,
colorBlending: 3,
backgroundColor: "#003FFF",
backgroundAlpha: 1,
resolution: 0.35,
grainScale: 5,
grainSparsity: 0.1,
grainIntensity: 0.25,
grainSpeed: 2.4
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#FB5066", enabled: true },
{ color: "#00EFFF", enabled: true },
{ color: "#0F0635", enabled: true },
{ color: "#8B6AE6", enabled: true },
{ color: "#0F0635", enabled: true },
{ color: "#FBFF00", enabled: true },
],
speed: 2,
horizontalPressure: 3,
verticalPressure: 3,
waveFrequencyX: 1,
waveFrequencyY: 0,
waveAmplitude: 2,
shadows: 2,
highlights: 6,
colorBrightness: 1.05,
colorSaturation: 3,
wireframe: false,
colorBlending: 3,
backgroundColor: "#003FFF",
backgroundAlpha: 1,
grainScale: 5,
grainSparsity: 0.1,
grainIntensity: 0.25,
grainSpeed: 2.4,
resolution: 0.35,
yOffset: 17472.72,
yOffsetWaveMultiplier: 9.5,
yOffsetColorMultiplier: 13.7,
yOffsetFlowMultiplier: 9.9,
flowDistortionA: 1.7,
flowDistortionB: 2.2,
flowScale: 2.6,
flowEase: 0.15,
flowEnabled: true,
enableProceduralTexture: true,
textureVoidLikelihood: 0.44,
textureVoidWidthMin: 140,
textureVoidWidthMax: 150,
textureBandDensity: 1.9,
textureColorBlending: 0.12,
textureSeed: 333,
textureEase: 0.3,
proceduralBackgroundColor: "#D0DBFB",
textureShapeTriangles: 46,
textureShapeCircles: 15,
textureShapeBars: 15,
textureShapeSquiggles: 10,
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.
