Mesh Gradient Generator
Create beautiful multi-color mesh gradients with customizable color points, presets, and CSS export.
Mesh Gradient Generator
Create beautiful multi-color mesh gradients for backgrounds and hero sections
.mesh-gradient {
background-color: #0a0a1a;
background-image:
radial-gradient(at 20% 20%, #ff6b6b 0px, transparent 70%),
radial-gradient(at 80% 30%, #4ecdc4 0px, transparent 70%),
radial-gradient(at 50% 80%, #45b7d1 0px, transparent 70%),
radial-gradient(at 10% 70%, #f7dc6f 0px, transparent 70%);
}What is a Mesh Gradient Generator?
A mesh gradient generator creates complex, multi-color gradient backgrounds by combining multiple radial gradients positioned at different points on the canvas. Unlike simple linear or radial gradients, mesh gradients blend multiple colors in organic, flowing patterns that create visually striking backgrounds for hero sections, landing pages, and modern UI designs.
CodeHelper's Mesh Gradient Generator lets you add up to 6 color points, position them with X/Y controls, randomize the entire gradient, and export pure CSS code with no images required.
Key Features
- Multi-Point Colors: Add up to 6 color points with individual position controls.
- Randomize: Generate harmonious random gradients with one click.
- Presets: Start from curated presets like Aurora, Sunset, Ocean, Forest, Neon, and Pastel.
- Grain Texture: Add optional grain/noise overlay for a more organic feel.
- Pure CSS: Output uses only CSS radial gradients, no images or canvas needed. The optional grain is an inline SVG noise filter written as a ::after pseudo-element.
How to use the Mesh Gradient Generator
- Add color points and position them using X/Y sliders.
- Adjust the base color and intensity.
- Click Randomize for instant inspiration, or load a preset.
- Copy the generated CSS for your project.
Whether you are designing hero sections, app backgrounds, or social media graphics, this free mesh gradient generator creates beautiful, modern gradients with pure CSS.
Frequently Asked Questions
How does a CSS mesh gradient work without images?
The tool stacks several radial gradients, one per color point, each positioned with the at x% y% syntax and fading to transparent at the intensity you set. Layered over a base background-color they blend into the soft, multi-color look of a mesh gradient. It is plain CSS, so it scales to any size and weighs a few hundred bytes.
What does the intensity slider change?
Intensity is the radius at which each color point fades to transparent, as a percentage of the box. Low values give small, distinct blobs of color; high values make the points overlap and blend into each other. Around 60% to 80% is usually the most organic.
How do I add the grain texture in my own CSS?
Set a grain value above 0 and the generated code adds a ::after pseudo-element with an inline SVG fractal noise filter, mix-blend-mode: overlay and the opacity you chose. The parent gets position: relative so the overlay covers the gradient. No image file is needed.
Can I animate a mesh gradient?
Yes. Because each point is a radial gradient with a position, you can animate background-position or transition between two generated background-image values with a @keyframes rule. For a smoother effect, put each color point on its own absolutely positioned blurred element and move those instead.
Related
Free forever, no ads, no tracking. Support the project