Silk Gradient

Silk Gradient adds a soft, liquid-looking animated background to any section. It uses WebGL, so it stays smooth even when it fills the screen.

• Colors: up to 8, each with its own Ratio to set how much of the gradient it covers. Framer color tokens work too.

• Direction: set the flow angle from 0° to 360°.

• Speed: from still to fast. Set it to 0 for a static background.

• Shape: Scale, Stretch and Turbulence control how big, how long and how wavy the folds are.

• Finish: Softness blends the colors, and Grain adds a film-like texture that also stops visible color banding.

• Seed: gives you a new arrangement with the same settings.

• Performance: it pauses when scrolled off-screen and stays still for visitors who have reduced motion turned on. If WebGL isn’t available, it shows a plain CSS gradient instead.

• Canvas Preview: turn this on to watch it move in the editor. By default it shows a still frame there to keep your project fast.