How to Create Mesh Gradients

A complete guide to using Better Gradient and implementing gradients in your projects

Getting Started

Everything you need to begin creating beautiful gradients

Better Gradient is a free mesh gradient generator that helps you create beautiful, modern backgrounds without any design experience. No account needed - just open the editor and start creating.

Open Editor

Step-by-Step Tutorial

Master gradient creation in four simple steps

Choose Your Colors

Start by selecting colors from the color palette. Right click on any shape to change its color, or use the color picker to create custom colors. You can add or remove shapes to adjust the complexity of your gradient by either right clicking.

Position Your Shapes

Drag shapes around the canvas to create your desired gradient pattern. The shapes will automatically blend together to create smooth color transitions. Experiment with different positions to find the perfect composition. Tip: you can update single shape properties by right clicking.

Adjust Blur and Settings

Fine-tune the blur, grain and opacity intensity to control how soft your gradient appears. You can also adjust the canvas size to match your project requirements. Use the sidebar controls to perfect your design.

Export Your Gradient

When you're happy with your gradient, export it in your preferred format: PNG for images, SVG for scalable graphics, or copy the CSS code to use directly in your stylesheets.

Export Formats Explained

Choose the right format for your project needs

PNG Export

Best for: Images, graphics, social media posts, presentations. PNG files are raster images that work everywhere but have a fixed size. Choose PNG when you need a simple image file.

WebP Export

Best for: Web optimization, modern browsers, faster loading. WebP files offer better compression than PNG with similar quality, resulting in smaller file sizes. Ideal for web performance.

SVG Export

Best for: Web backgrounds, responsive designs, retina displays. SVG files are vector graphics that scale perfectly to any size without losing quality. Perfect for modern web development.

CSS Code

Best for: Web developers, direct CSS implementation. Copy the generated CSS code and paste it directly into your stylesheet. The code uses modern CSS techniques for optimal performance.

Implementation Guide

Learn how to use gradients in your projects

Using in HTML/CSS

/* Copy the CSS from export */
.hero-section {
  background: /* gradient code */;
}

/* Or use as background image with SVG */
.header {
  background-image: url('gradient.svg');
  background-size: cover;
}

Using in React/Next.js

// Import the SVG
import GradientBg from './gradient.svg';

// Use as background
<div style={{
  backgroundImage: `url(${GradientBg})`,
  backgroundSize: 'cover'
}}>
  Content here
</div>

Using in Figma/Design Tools

Export as PNG and import into Figma, Sketch, or Adobe XD. The PNG maintains full quality and can be used as a background layer in your designs.

Tips & Best Practices

Pro tips to create stunning gradients

→Use 3-5 shapes for subtle, elegant gradients. Too many shapes can look busy.
→Choose colors from the same color family for harmonious results.
→Higher blur values create softer, more subtle transitions.
→Match your canvas size to your project dimensions for best results.
→Save the share URL to come back and edit your gradient later.

Ready to Create?

Now that you know how it works, start creating your own stunning mesh gradients.

Open Gradient Generator

/* Copy the CSS from export */ .hero-section { background: /* gradient code */; } /* Or use as background image with SVG */ .header { background-image: url('gradient.svg'); background-size: cover; }