Grainy Mesh Gradient: Free Backgrounds Component by Alpheratz

Marketplace Components Categories Backgrounds

Add an aesthetic touch with fluid gradients featuring noise/film grain texture. Lightweight, responsive, and adds modern visual depth to your website.

About this Component

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).