Theme

Grain Gradient

Free

Grainy multi-color gradients in seven animated shapes, with controls for softness, distortion, grain, and palette. Adapted from Grain Gradient by Paper Shaders (shaders.paper.design) under the Apache 2.0 license.

Loading code...

Starwind Dependencies

This component requires Starwind Pro.

Get lifetime access to all premium components, updates, and priority support.

Upgrade to Pro

Failed to load code. Please try again.

Customize

Controls

Color 1

Color 2

Color 3

Color 4

Color 5

Color 6

Background

Gradient colors4

Shape

Distortion0.5

Grain0.25

Softness0.5

Speed1

Scale1

Rotation0

Offset X0

Offset Y0

Code

Usage

<ShaderGrainGradient
  gradientColor1="#7300ff"
  gradientColor2="#eba8ff"
  gradientColor3="#00bfff"
  gradientColor4="#2a00ff"
  gradientColor5="#7300ff"
  gradientColor6="#eba8ff"
  backgroundColor="#000000"
  gradientColorCount={4}
  gradientShape="corners"
  bandDistortion={0.5}
  grainAmount={0.25}
  bandSoftness={0.5}
  flowSpeed={1}
  graphicScale={1}
  graphicRotation={0}
  graphicOffsetX={0}
  graphicOffsetY={0}
/>

Props

prop	type	default	description
`gradientColorCount`	`number`	`4`	Number of active gradient colors, from 1 to 6.
`gradientColor1`	`string`	`#7300ff`	Gradient color 1 as a CSS color.
`gradientColor2`	`string`	`#eba8ff`	Gradient color 2 as a CSS color.
`gradientColor3`	`string`	`#00bfff`	Gradient color 3 as a CSS color.
`gradientColor4`	`string`	`#2a00ff`	Gradient color 4 as a CSS color.
`gradientColor5`	`string`	`#7300ff`	Gradient color 5 as a CSS color.
`gradientColor6`	`string`	`#eba8ff`	Gradient color 6 as a CSS color.
`backgroundColor`	`string`	`#000000`	Background color behind the gradient. Accepts any CSS color.
`gradientShape`	`"wave" \| "dots" \| "truchet" \| "corners" \| "ripple" \| "blob" \| "sphere"`	`corners`	Animated gradient shape.
`bandSoftness`	`number`	`0.5`	0 gives hard color edges and 1 gives smooth gradients. Range 0 to 1.
`bandDistortion`	`number`	`0.5`	Distortion between the color bands. Range 0 to 1.
`grainAmount`	`number`	`0.25`	Strength of the grain overlay. Range 0 to 1.
`flowSpeed`	`number`	`1`	Animation speed. 0 stops the animation. Range 0 to 2.
`graphicScale`	`number`	`1`	Overall zoom level of the graphic.
`graphicRotation`	`number`	`0`	Rotation of the graphic in degrees.
`graphicOffsetX`	`number`	`0`	Horizontal offset of the graphic center.
`graphicOffsetY`	`number`	`0`	Vertical offset of the graphic center.
`graphicFit`	`"none" \| "contain" \| "cover"`	`contain`	How the graphic fits the canvas.
`opacity`	`number`	`1`	Sets the overall opacity of the shader background wrapper.
`maxDpr`	`number`	`1.5`	Caps device pixel ratio for sharper output without runaway GPU cost.
`maxFps`	`30 \| 45 \| 60`	`60`	Caps the animation frame rate for performance-sensitive pages.