Mesh Gradient

Preview component

A living, flowing mesh gradient background — up to 10 color spots drifting along organic trajectories, warped by noise and swirl distortion. Way more alive than a static CSS gradient, and lighter than a video loop.

Features

• Up to 10 color spots — build rich, multi-color flowing gradients instead of a flat 2-3 color blend

• Organic distortion — noise-based warping keeps the shape from ever looking mechanical or repetitive

• Swirl control — add vortex-style motion for a more dynamic, twisting flow

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

• Freeze-frame capable — set speed to 0 and use frame to lock the gradient on a single static state

• Grain layer — mix grain into the shape edges or add a full post-processing grain overlay

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

Controls

• Colors

• Distortion

• Swirl

• Grain Mixer

• Grain Overlay

• Speed

• Frame

• Scale / Rotation / Offset

How to use

1. Add the Mesh Gradient component onto your canvas

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

3. Adjust Distortion and Swirl until the flow feels right — low values stay calm and soft, higher values get more vortex-like

4. Set Speed to control how fast the gradient animates, or set it to 0 for a static, freeze-frame look

5. Optionally add Grain Mixer / Grain Overlay for extra texture

Shader powered by Paper Shaders.

Refund Policy:

Due to the nature of digital products, all sales are final. Once purchased, this component is non-refundable. Please make sure it fits your needs before completing the checkout.

Support: hi@alicorak.com