Theme

Mesh Gradient

Free

Flowing color spots with organic distortion, swirl, and optional grain. Adapted from Mesh 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

Spot 1

Spot 2

Spot 3

Spot 4

Spot 5

Spot 6

Spot colors4

Distortion0.8

Edge grain0

Grain overlay0

Swirl0.1

Speed1

Scale1

Rotation0

Offset X0

Offset Y0

Code

Usage

<ShaderMeshGradient
  spotColor1="#e0eaff"
  spotColor2="#241d9a"
  spotColor3="#f75092"
  spotColor4="#9f50d3"
  spotColor5="#e0eaff"
  spotColor6="#241d9a"
  spotColorCount={4}
  meshDistortion={0.8}
  edgeGrain={0}
  grainOverlay={0}
  swirlStrength={0.1}
  driftSpeed={1}
  graphicScale={1}
  graphicRotation={0}
  graphicOffsetX={0}
  graphicOffsetY={0}
/>

Props

prop	type	default	description
`spotColorCount`	`number`	`4`	Number of active spot colors, from 1 to 6.
`spotColor1`	`string`	`#e0eaff`	Spot color 1 as a CSS color.
`spotColor2`	`string`	`#241d9a`	Spot color 2 as a CSS color.
`spotColor3`	`string`	`#f75092`	Spot color 3 as a CSS color.
`spotColor4`	`string`	`#9f50d3`	Spot color 4 as a CSS color.
`spotColor5`	`string`	`#e0eaff`	Spot color 5 as a CSS color.
`spotColor6`	`string`	`#241d9a`	Spot color 6 as a CSS color.
`meshDistortion`	`number`	`0.8`	Strength of the organic noise distortion. Range 0 to 1.
`swirlStrength`	`number`	`0.1`	Strength of the vortex distortion. Range 0 to 1.
`edgeGrain`	`number`	`0`	Grain distortion along the color edges. Range 0 to 1.
`grainOverlay`	`number`	`0`	Black and white grain drawn over the result. Range 0 to 1.
`driftSpeed`	`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.