Grain Gradient

An animated, grain-textured gradient background — up to 7 colors blended into 7 different abstract shapes, from soft waves to a 3D sphere, all with a built-in noise overlay for a distinctly non-flat, organic finish.

Features

• Up to 7 colors — build rich, multi-stop gradients instead of a flat 2-color fade

• 7 shape modes — Wave, Dots, Truchet, Corners, Ripple, Blob, and Sphere, each a completely different composition

• Softness control — go from hard, poster-like color edges to smooth, blended transitions

• Intensity control — adjust how much distortion happens between color bands

• Built-in grain — a noise overlay baked directly into the gradient for texture, no separate grain layer needed

• Fully animated — smooth, continuous motion by default, with full control over speed

• Built in Paper style, running on a lightweight, zero-dependency shader engine for smooth performance

Controls

• Colors

• Background Color

• Softness

• Intensity

• Noise

• Shape

• Speed

• Scale / Rotation / Offset

How to use

1. Add the Grain Gradient component onto your canvas

2. Add up to 7 colors to build your gradient palette

3. Pick a Shape — Sphere and Blob work great as hero backgrounds, Truchet and Corners feel more geometric

4. Adjust Softness and Intensity to set how sharp or smooth the color transitions are

5. Dial in Noise for the amount of grain texture

6. Set Speed to control animation pace, or set it to 0 to freeze on a single frame

Shader powered by Paper Shaders.