Grainy Mesh Gradient
Add an aesthetic touch with fluid gradients featuring noise/film grain texture. Lightweight, responsive, and adds modern visual depth to your website.
Make it with Workshop
Build your own component with AI
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).
