Mesh gradient generator for soft, blurry backgrounds
This mesh gradient generator lets you place several colors on a canvas and blend them into one soft, blurry background. You drag color points, adjust blur, blend mode and grain, and see the result instantly. Then you copy clean CSS or download an image. It is free, runs in your browser and needs no signup.
How to make a CSS mesh gradient step by step
You can build a CSS mesh gradient in about a minute by moving points on the canvas and copying the code underneath. Follow these steps.
- Drag any color point on the canvas to a new position. Hold Shift to snap it to 5% steps.
- Double-click an empty spot on the canvas to add a point, or use Add point in the Mesh Gradient Color Points list.
- Change a color with its picker or HEX field in the list. Use the eye icon to hide a point and the grip handle to reorder layers.
- Set Background color, Blur strength, Layer blend mode and the Grain (noise) texture in Mesh Gradient Settings.
- Choose the CSS, Tailwind CSS, SCSS or SVG tab and pick a color notation.
- Press Copy CSS, Copy Tailwind or one of the download buttons.
Not sure where to start? Press Randomize for new colors, positions and sizes, or Shuffle to move the points while keeping your colors. Undo and Redo on the canvas toolbar let you step back through your changes.
Mesh gradient settings you can control
The tool gives you control over every layer of the blurry gradient, from the colors to the grain on top. Here is what each part does.
- Color points: use from 2 to 10 points. Each one is a colored glow you can drag, recolor, hide or reorder. The top row in the list is the top layer.
- Color harmony: choose Analogous, Monochromatic, Triadic, Tetradic (square), Complementary or Split complementary to recolor all points from the first point's color. Choose Custom to keep your own colors.
- Layer blend mode: pick one of 16 modes, from Normal and Multiply to Luminosity, to control how overlapping points mix.
- Blur strength: slide from 0 to 200 px. The default is 80 px.
- Grain (noise) texture: add a fine film grain with an opacity from 0 to 50%. The default is 15%.
- Fullscreen: preview the gradient at full size, with Add point and Randomize buttons still available.
Point shape, radius, falloff and hardness
Select a point to edit its shape and falloff in the Mesh Point Shape and Falloff panel. Shape is a Circle or an Ellipse. A circle uses one Radius from 40 to 900 px, while an ellipse has separate Horizontal and Vertical radius sliders from 40 to 1200 px.
Falloff (5 to 100%) sets where the color has fully faded, as a share of the radius. Hardness (0 to 95%) adds a solid core before the fade begins. Low hardness gives a smooth aurora glow, and higher hardness gives a more defined color blob.
How does a CSS mesh gradient work without a mesh function?
CSS has no native mesh gradient function. A CSS mesh gradient is built by stacking several radial-gradient() layers, each fading to transparent, on top of a background color. Blur then melts the layers into one smooth surface. Read how radial-gradient() works on MDN Web Docs.
Each color point in the tool becomes one layer. Here is a single layer for a circle point at 20% across and 20% down:
radial-gradient(circle 260px at 20% 20%, #FF00CC 0%, transparent 50%)The radius is 260 px and the falloff is 50%, so the color fades to transparent at 130 px from the center. With a Hardness of 20%, the color would stay solid for the first 52 px (20% of 260 px) before fading.
The generated CSS places these layers in a ::before element, applies filter: blur() and clips the result with overflow: hidden. If you use a non-Normal blend mode, it adds background-blend-mode. See the background-blend-mode reference for how each mode combines layers.
Which blend mode and blur work best for a blurry gradient?
Normal blend mode with a blur between 60 and 120 px suits most backgrounds. Change the blend mode when overlapping colors look muddy or too flat. The table shows what the common modes do.
| Blend mode | Effect on overlapping points | Good for |
|---|---|---|
| Normal | Upper layers cover lower ones with their fade | Predictable, soft color fields |
| Screen | Lightens where layers overlap | Glowing aurora looks on dark backgrounds |
| Multiply | Darkens where layers overlap | Rich, deeper tones on light backgrounds |
| Overlay | Boosts contrast, light and dark together | Punchy, saturated mixes |
| Soft light | Gentle lightening or darkening | Subtle shifts in pastel palettes |
| Color or Hue | Applies color while keeping tones below | Recoloring a layered base |
Blur strength changes the mood more than any other setting. At 0 px you see the raw circles, around 40 px gives soft blobs, and 100 px or more gives a smooth, out-of-focus wash. You can read how the blur filter behaves in the MDN blur() reference.
Mesh gradient export formats and color notations
The tool outputs code you can paste into a project, plus images for places where code will not work. Pick the format that fits your stack.
| Output | What you get | Use it when |
|---|---|---|
| CSS | A .mesh-gradient class with ::before layers and an optional ::after grain overlay | You write plain CSS |
| Tailwind CSS | Markup using utility classes and an inline gradient style | Your project uses Tailwind |
| SCSS | Variables for background, blur, blend and layers, plus a mixin | You want reusable settings |
| SVG | A scalable vector file with gradients and optional grain | You need a resizable asset |
| PNG | A 2x image download | You need a flat file for slides, social posts or lightweight pages |
| JSON and Share link | Your settings, or a link that restores the design | You want to save or send your work |
For the CSS, Tailwind and SCSS tabs, Color notation can be HEX, RGB, HSL, OKLab or OKLCH. Use OKLCH if your design system already works in perceptual color, and see the OKLCH vs HSL comparison for the trade-offs. To translate an OKLCH value later, use the OKLCH to HEX converter.
Radii and blur are exported in pixels, so the code matches the canvas on an element of the same size. The CSS also notes the canvas size it was built for. If your hero section is much larger or smaller, adjust the radius and blur until it looks right.
Mesh gradient design tips and common mistakes
Good mesh gradients use few, well-chosen colors and enough space between them. These habits prevent most problems.
- Limit your palette: three to five points usually look better than ten. Start from a color harmony instead of random hues.
- Check text contrast: text on a gradient must still meet WCAG 2.2. Normal text needs a 4.5:1 contrast ratio and large text needs 3:1, as defined in Success Criterion 1.4.3. Test the lightest and darkest areas behind your text with the contrast checker.
- Keep dark areas where text sits: move or shrink points so the busiest, brightest color is not under your headline.
- Use grain sparingly: 8 to 15% opacity reduces visible banding in smooth blends. Higher values start to look dirty.
- Watch performance: a large blur on a very big element can be heavy on low-end devices. For a static background, consider the PNG download instead of live CSS.
- Do not confuse hidden with deleted: the eye icon hides a point from the output without removing it, which is handy for comparing versions.
Where to use a mesh gradient background
A mesh gradient background works best behind content that needs atmosphere but not detail. Common uses include:
- Landing page and SaaS hero sections
- Login screens, onboarding and empty states
- Cards, banners and pricing sections
- Social posts, presentation slides and wallpapers (use the PNG)
- App icons and Open Graph images built from the SVG
Pair the background with white or near-black type and a simple font. Keep interface elements, such as buttons, in a flat color so they stand out from the blur.
Next steps after you build your mesh gradient
If you want a simpler two or three color fade, try the linear and radial gradient generator. To make your background move, use the animated gradient generator. For frosted panels that sit on top of your mesh, the glassmorphism generator pairs naturally with this blurry look.