Mesh Gradient Generator

What it does

The fastest mesh gradient generator on the web. Features: 🎨 Add unlimited colors 💽 Remix colors and layout in 1-click 🫨 Blur and noise effects 💅 Gallery of (editable) mesh gradient inspiration 🖱️ One-click export to Figma or SVG

Create & export mesh gradients as SVG or to Figma. Quickly experiment with grainy noise and blur. Includes a one-click export to Figma for use in designs.

New Gradient New Positions New Colors Colors Background Noise Blur Noise Blend Mode Overlay Soft Light Lumin. Aspect Ratio 1:1 3:2 2:1 Gradient Gallery Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Why use this mesh gradient generator? This tool is the quickest way to create & tinker with mesh gradients on the web 🙂 It also allows a one-click export into Figma (the “Copy SVG for Figma” button above – click it, then open Figma and paste). Optionally, you can adjust the color values, swatch sizes and layering, noise, and blur. But the formula above is fast 😎 Once you have a gradient you like, you can copy the Figma-friendly SVG code to your clipboard by pressing “Copy SVG for…from learnui.design

• 
  100 Mesh Gradients2021 · ▲479

  Make your website beautiful with mesh gradients

• 
  Mesh·y - Generate Mesh Gradients2022 · meshgradient.in · ▲435

  Generate custom beautiful mesh gradients

• 
  Mesh Gradients2021 · meshgradients.com · ▲340

  Create awesome mesh gradients right in Figma

• 
  CSS Gradient2018 · cssgradient.io · ▲410

  A simple, colorful gradient generator

• 
  CSS Gradient Generator2024 · cssgradientgenerator.com · ▲237

  Generate and make beautiful colors

• 
  SVG Mesh Gradient Generator2022 · magicpattern.design · ▲257

  Create unique customizable SVG gradients with MagicPattern

• 
  Lofi Cities – Pixel-art city nights with browser-generated lofi▲319

  Endless lofi beats composed live in your browser, over pixel-art nights in Paris, Tokyo, New York, Hong Kong, Sydney, San Francisco and more. Free, no sign-up.

  Work · 26d ago · loficities.com

• 
  Smooth Recorder▲257

  Mac screen recordings that look edited when you hit stop

  Work · 20d ago · smoothrecorder.com

• 
  Figma Specs▲224

  A container for your context that lives on the Figma canvas

  Work · 4d ago · figma.com

• 
  The rarest tech books and docs you've probably never read▲190

  Work · 14d ago · readrare.com

• 
  Screen Studio 3.0▲1,832

  Beautiful screen recordings with instant shareable links

  Growth · 2025 · screen.studio

• 
  Tana▲1,665

  Put your notes to work with voice and AI

  AI · 2025 · tana.inc

• IG
  I got laid off from Meta and created a minor hit on Steam▲1,581

  I was at FB/Meta from late 2013 to early 2023, mostly working in the compiler/runtime spaces. I got hit in the spring 2023 layoff wave. I immediately started making games in my newfound free time (a lifelong interest, and I even worked in AA(A?) back ca. ~2000), and in October 2023 I stumbled upon the idea of a roguelike pachinko/plinko game inspired by Luck Be A Landlord. Things snowballed quickly, I started talking to publishers, then worked like crazy through all of 2024, almost the hardest I've ever worked in my career, and launched the game in December 2024. It's sold…

  Work · 2025

• 
  Tanka▲1,410

  AI Messenger with smart reply & long term memory for teams

  AI · 2025 · tanka.ai

• 
  Tool Finder▲1,327

  Your shortcut to better software

  AI · 2025 · toolfinder.com

• 
  I built an app to stop me doomscrolling by touching grass▲1,203

  i wanted to change the habit of reaching for my phone in the morning and doomscrolling away an hour so i built an app to help me. now i have to literally touch grass before accessing my most distracting apps the app is built in swiftui, uses the screen time apis provided by apple and google vision to recognise grass or not i'd love to get your thoughts on the concept.

  Life & fun · 2025 · touchgrass.now