How to Create Mesh Gradients for Your Website

You want a mesh gradient on your site. Not the flat CSS kind. The organic, flowing, living kind. Here is how to make one in about 30 seconds.

Step 1: Generate a palette

Open the InstantGradient generator and hit spacebar. That is it. You have a mesh gradient.

Every press generates a new harmonious palette with 2 to 8 colors. The colors are picked using color theory rules (analogous, complementary, triadic, split) so they always look good together.

If you see a color you love, click the lock icon on it. The next shuffle will keep that color and regenerate the rest around it.

Step 2: Tune it

The default gradient already looks good. But you can make it yours with a few tweaks:

• Distortion controls how much the colors bend and warp
• Swirl adds a rotational flow to the blend
• Scale zooms the gradient in or out
• Grain adds texture (subtle grain makes gradients feel more physical)
• Speed controls the animation pace (slow for backgrounds, faster for attention)

You can also toggle effects like fluted glass, which adds a refractive texture on top of the gradient.

Step 3: Export

Once you are happy, you have several export options:

For images: PNG or WebP, up to 4K resolution (Pro). Perfect for hero sections, social media backgrounds, and presentation slides.

For video: Animated MP4 (Pro). A few seconds of your gradient in motion. Great for social content or living backgrounds.

For code: Copy the CSS gradient approximation, Tailwind config, CSS variables, or raw hex values. Paste directly into your project.

Real examples

Here are a few palettes that work well for common use cases:

SaaS landing page (clean, professional):

Creative portfolio (warm, expressive):

Dark mode app (moody, immersive):

Explore more in the palette directory, or filter by mood: warm, cool, pastel, bold.

Tips for using mesh gradients on your site

As a hero background. Export as a high-res image and set it as a background-image. Add a semi-transparent overlay for text readability. This loads faster than running the shader live.

As a living background. Use the paper-design/shaders-react package (the same one InstantGradient uses) to render the gradient in real time on your page. Copy the colors and parameters from the export panel.

As social content. Export as MP4 video, then drop it into your video editor or upload directly to Instagram, TikTok, or LinkedIn as a background.

As a design token. Export the palette as CSS variables or Tailwind config and use the colors throughout your design system. The gradient is just the visual anchor, but the individual colors work as your brand palette.

What about performance?

Live shader gradients run on the GPU, not the CPU. The performance impact is similar to playing a video. For most hero sections, you will not notice any lag.

But if you are worried, just export as an image. A 1920x1080 WebP weighs about 50-100KB and loads instantly. You get the mesh gradient look without any JavaScript or WebGL dependency.

Keep exploring

• What is a mesh gradient? for the theory
• Mesh gradients vs CSS gradients for the comparison
• 4,900+ named colors to find your starting point
• Browse community palettes for inspiration