What it is
A flat plane at high brightness with deep indigo and violet, then a heavy grain pass over the top. The grain is doing most of the work here — it breaks up the colour banding you would otherwise get across a large dark area.
Good for
Dark-theme hero sections, developer tool landing pages.
Formula
#130437#B34BD0#210751#3511A5
| Colours | 4 |
|---|---|
| Speed | 4 |
| Wave amplitude | 0 |
| Saturation | 2 |
| Brightness | 1.95 |
| Grain | 6 |
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: "#130437", enabled: true },
{ color: "#B34BD0", enabled: true },
{ color: "#210751", enabled: true },
{ color: "#3511A5", enabled: true },
],
speed: 4,
horizontalPressure: 7,
verticalPressure: 3,
waveFrequencyX: 0,
waveFrequencyY: 0,
waveAmplitude: 0,
shadows: 4,
highlights: 0,
colorBrightness: 1.95,
colorSaturation: 2,
wireframe: false,
colorBlending: 9,
backgroundColor: "#210751",
backgroundAlpha: 1,
resolution: 1.15,
grainScale: 6,
grainSparsity: 0,
grainIntensity: 0.13,
grainSpeed: 0
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#130437", enabled: true },
{ color: "#B34BD0", enabled: true },
{ color: "#210751", enabled: true },
{ color: "#3511A5", enabled: true },
{ color: "#8F3E8D", enabled: false },
{ color: "#FF9A9E", enabled: false },
],
speed: 4,
horizontalPressure: 7,
verticalPressure: 3,
waveFrequencyX: 0,
waveFrequencyY: 0,
waveAmplitude: 0,
shadows: 4,
highlights: 0,
colorBrightness: 1.95,
colorSaturation: 2,
wireframe: false,
colorBlending: 9,
backgroundColor: "#210751",
backgroundAlpha: 1,
grainScale: 6,
grainSparsity: 0,
grainIntensity: 0.13,
grainSpeed: 0,
resolution: 1.15,
yOffset: 75325,
yOffsetWaveMultiplier: 4.5,
yOffsetColorMultiplier: 4.8,
yOffsetFlowMultiplier: 5.2,
flowDistortionA: 0.4,
flowDistortionB: 10,
flowScale: 3.3,
flowEase: 0.37,
flowEnabled: true,
enableProceduralTexture: false,
transparentTextureVoid: false,
textureVoidLikelihood: 0.06,
textureVoidWidthMin: 10,
textureVoidWidthMax: 500,
textureBandDensity: 0.8,
textureColorBlending: 0.06,
textureSeed: 333,
textureEase: 0.38,
proceduralBackgroundColor: "#003FFF",
textureShapeTriangles: 20,
textureShapeCircles: 15,
textureShapeBars: 15,
textureShapeSquiggles: 10,
domainWarpEnabled: false,
domainWarpIntensity: 0,
domainWarpScale: 3,
vignetteIntensity: 0,
vignetteRadius: 0.8,
fresnelEnabled: false,
fresnelPower: 2,
fresnelIntensity: 0.5,
fresnelColor: "#FFFFFF",
iridescenceEnabled: false,
iridescenceIntensity: 0.5,
iridescenceSpeed: 1,
bloomIntensity: 0,
bloomThreshold: 0.7,
chromaticAberration: 0,
shapeType: "ribbon",
shapeRotationX: 0,
shapeRotationY: 0,
shapeRotationZ: 0,
shapeAutoRotateSpeedX: 0,
shapeAutoRotateSpeedY: 0,
sphereRadius: 15,
torusRadius: 15,
torusTube: 5,
cylinderRadius: 10,
cylinderHeight: 40,
planeBend: 1.7,
planeTwist: 5,
silhouetteFade: 0.2,
cylinderFade: 0.08,
ribbonFade: 0.23,
flatShading: false,
cameraLock: false,
cameraX: 15,
cameraY: 0.5,
cameraZ: 0,
cameraRotationX: 0,
cameraRotationY: 0,
cameraRotationZ: 0,
cameraZoom: 1.45
});Prefer a file? Open it in the editor and export a PNG still or an MP4 loop — see the gradient video guide.
