Direct the composition
Choose three to five color fields, then position and size each one instead of accepting a fixed layout.
Color & atmosphere
Animated Mesh Gradient
Layer color fields into a fluid, tactile background. Tune the composition, movement, softness, contrast, and grain while the result moves in front of you.
Landscape · 1600 × 1000
Made for atmosphere
A mesh gradient with enough control to feel intentional.
Use the studio for landing-page heroes, editorial backdrops, product launch sections, and subtle color fields behind type. Every preset is a composed starting point rather than a random palette.
Tune the surface
Balance softness, saturation, contrast, and fine grain for anything from quiet editorial color to a vivid signal.
Export what you made
Copy dependency-free HTML and CSS, download a standalone page, or create a still PNG in the selected format.
Three-step workflow
How to use the Mesh Gradient studio
- Choose a mood
Begin with a preset whose palette, spacing, and surface already suit the feeling you want.
- Place the color
Select each field to adjust its color, position, and footprint. Then set the direction and pace.
- Take it to your site
Use the copied snippet inside a section, open the standalone HTML as a reference, or use the PNG as a static fallback.
Questions, answered.
Is the gradient generated on a server?
No. The preview, randomization, and exports all run locally in your browser. Your settings and images are not uploaded.
Can I use the result on a commercial website?
Yes. The exported HTML, CSS, and PNG are free to use in personal and commercial projects without an EvenMesh watermark.
Does the animation respect reduced-motion settings?
Yes. The studio interface and the exported CSS stop non-essential motion when a visitor requests reduced motion.
What can I export?
You can copy an HTML/CSS embed, download a standalone HTML document, or download a still PNG at the dimensions shown in the preview.