Skip to content

Grainy Mesh Gradient

Animated grainy mesh gradients.

Grainy Mesh Gradient preview image 1

Summary

Transform boring layouts into stunning visuals with this Grainy Mesh Gradient.

Description

Transform boring layouts into stunning visuals with this Grainy Mesh Gradient. Combining fluid color blending with raw film grain texture, it creates the trending Retro-Modern look loved by top startups and designers.

✨ Key Features:

  • Texture Depth: Realistic noise effect that eliminates color banding, making the gradient look organic and premium.

  • Liquid Motion: Slow, soothing color movement that adds life without distracting from your text.

  • Fully Customizable: Tweak 4 color points, animation speed, and noise intensity directly from the property panel.

  • Lightweight: Built with native CSS & SVG, not heavy video files. Keeps your site loading fast!

Perfect for: Hero Backgrounds, Feature Cards, or a stand-out Footer.

Customization:

  • Check the properties panel on the right.

  • Change the Colors (1-4) to match your brand palette.

  • Adjust Noise Opacity to control the texture strength (Recommended: 0.3 - 0.5).

  • Set Animation Speed (Higher number = Slower/calmer movement).

Rank history How rankings work →

12001400143428/149/59/2710/1911/10
  • All · #4342

Details

More like this