Use this mesh gradient generator to build a smooth, colorful CSS background in seconds — drag points, pick colors, copy the code. No signup, no design software required.
Drag a point to reposition it. Click a point to change its color.
What Is a Mesh Gradient?
A mesh gradient is a background made from multiple color points blended together, rather than a single line or radius of color like a standard linear or radial gradient. Each point (sometimes called a node) pulls color toward itself, and the space between points blends smoothly — the result looks closer to a soft, painterly wash of color than a typical two-tone gradient. You’ll also see this called a “gradient mesh,” particularly among designers coming from Illustrator or Photoshop, where the technique originated — on the web, both terms point to the same visual effect.
CSS has no dedicated mesh-gradient property, so this generator builds the effect by layering multiple radial-gradient() values and positioning each one independently. It’s a well-established technique, not a hack — it’s how most CSS mesh gradient tools on the web work under the hood.
How This Mesh Gradient Generator Works
Every point you place becomes one radial-gradient() layer in the final CSS, positioned with background-position and sized with background-size so the colors overlap and blend. Adding a point adds a layer; moving a point updates that layer’s position; changing a point’s color updates that layer’s color — the preview and the CSS output panel stay in sync as you work.
You can use 3 to 8 points. Fewer points give a cleaner, more graphic look; more points give a denser, softer blend — most site backgrounds land well with 4 to 6. The five built-in presets (Ocean, Sunset, Aurora, Candy, Brand Navy) apply a tested color set instantly if you’d rather start from a palette than pick colors one by one.
Animating Your Mesh Gradient
Turning on Animate adds a @keyframes rule that slowly shifts each point’s position back and forth, so the gradient drifts gently instead of sitting static. This uses the same background-position values the static version uses — it’s just interpolating between two states — so it stays lightweight and doesn’t require JavaScript on your live site once you’ve copied the CSS.
An animated mesh gradient works well as a subtle hero-section or header background where you want some motion without it competing with your content. If you’re using it behind text, keep the animation slow (the default is a 10-second loop) so it doesn’t strain readability.
Using Mesh Gradients as Website Backgrounds
The CSS this tool generates is copy-paste ready for any site, WordPress or otherwise — apply the .mesh-gradient-bg class to a section, div, or block, or rename the class to match your project. On a WordPress site specifically, the fastest path is usually pasting the generated CSS into Appearance → Customize → Additional CSS, or into a specific block’s “Additional CSS class(es)” field if your theme or page builder supports scoped custom CSS per block. Full Site Editing themes typically let you add custom CSS at the template or block level as well.
One practical note: because a mesh gradient background is pure CSS with no image file, it adds effectively zero page weight — a meaningful advantage over a background image if page speed and Core Web Vitals matter to your site (and for most WordPress sites, they do).
FAQ
What is a mesh gradient generator?
A mesh gradient generator is a tool that lets you place multiple colored points on a canvas and automatically outputs the CSS needed to recreate that blended color effect as a background, without hand-writing layered gradients yourself.
How do I create a CSS mesh gradient?
Place at least three color points on the canvas, adjust their position and color until the preview looks right, then copy the CSS from the output panel — it’s ready to paste directly into your stylesheet or WordPress custom CSS.
Can I animate a mesh gradient?
Yes — toggle Animate on and the tool adds a @keyframes rule that gently shifts the gradient over time; the animated CSS is included automatically when you copy the code.
Is this mesh gradient generator free to use?
Yes, it’s completely free with no signup, and there’s no limit on how many times you can generate or copy CSS.
How do I add a mesh gradient to my WordPress site?
Copy the generated CSS and paste it into Appearance → Customize → Additional CSS, or into a block’s custom CSS class field, then apply the .mesh-gradient-bg class (or your renamed version) to the section you want it on.