What it is
Magenta, deep blue, cyan and violet over a muted plum, at moderate speed and amplitude. A conventional neon-night palette done without letting any one colour blow out.
Good for
Events, nightlife, entertainment.
Formula
#FF3087#1B36A6#00D3FF#6D3BFF#492E52
| Colours | 5 |
|---|---|
| Speed | 3.5 |
| Wave amplitude | 5 |
| Saturation | 7 |
| Brightness | 1 |
| Grain | 2 |
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: "#FF3087", enabled: true },
{ color: "#1B36A6", enabled: true },
{ color: "#00D3FF", enabled: true },
{ color: "#6D3BFF", enabled: true },
{ color: "#492E52", enabled: true },
],
speed: 3.5,
horizontalPressure: 3,
verticalPressure: 5,
waveFrequencyX: 8,
waveFrequencyY: 1,
waveAmplitude: 5,
shadows: 3,
highlights: 2,
colorBrightness: 1,
colorSaturation: 7,
wireframe: false,
colorBlending: 7,
backgroundColor: "#003FFF",
backgroundAlpha: 1,
resolution: 1.2,
grainScale: 2,
grainSparsity: 0,
grainIntensity: 0.5,
grainSpeed: 1
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#FF3087", enabled: true },
{ color: "#1B36A6", enabled: true },
{ color: "#00D3FF", enabled: true },
{ color: "#6D3BFF", enabled: true },
{ color: "#492E52", enabled: true },
],
speed: 3.5,
horizontalPressure: 3,
verticalPressure: 5,
waveFrequencyX: 8,
waveFrequencyY: 1,
waveAmplitude: 5,
shadows: 3,
highlights: 2,
colorBrightness: 1,
colorSaturation: 7,
wireframe: false,
colorBlending: 7,
backgroundColor: "#003FFF",
backgroundAlpha: 1,
grainScale: 2,
grainSparsity: 0,
grainIntensity: 0.5,
grainSpeed: 1,
resolution: 1.2,
yOffset: 110380.5,
yOffsetWaveMultiplier: 3,
yOffsetColorMultiplier: 3.3,
yOffsetFlowMultiplier: 3.8,
flowDistortionA: 5,
flowDistortionB: 7.7,
flowScale: 2.6,
flowEase: 0.36,
flowEnabled: true,
enableProceduralTexture: false,
textureVoidLikelihood: 0.22,
textureVoidWidthMin: 120,
textureVoidWidthMax: 150,
textureBandDensity: 1.9,
textureColorBlending: 0.12,
textureSeed: 333,
textureEase: 0.58,
proceduralBackgroundColor: "#D0DBFB",
textureShapeTriangles: 20,
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.
