siutil. Mesh Gradient Generator
processed in your browser · never uploaded

Base color

Blob size

50%

Color points

Preview

CSS

 
Everything runs in your browser — your colors and settings are never uploaded.
 
 
   
  
Build the popular mesh gradient backgrounds — the kind you see on SaaS landing pages, hero sections and social banners — just by placing colors on a canvas. It works by layering several `radial-gradient` circles into a single background so the colors blend softly into each other for a rich, modern look. Each color point has its own color and position (X% / Y%), and you can add as many as you like with "Add color." Pick a base color and the gaps fill with it, keeping the overall tone stable. The "Blob size" slider controls how far each color spreads — smaller for scattered points of light, larger for big color fields that cover the whole canvas. Not sure where to place them? The "Randomize" button re-rolls every point's position at once so you can hunt for a happy accident. The preview updates live, and the output is plain CSS — `background-color` plus `background-image: radial-gradient(...), ...;` — ready to paste and copyable with one click. No need to open Figma or Photoshop: the CSS for your mesh gradient background is done right in the browser. Your colors and settings stay in your browser and are never uploaded, stored, or sent to a server.
How to use
  1. Pick a base color, then set each color point's color and position (X% / Y%). Use "Add color" to add more.
  2. Adjust the "Blob size" slider to control how far each color spreads. Hit "Randomize" to re-roll the positions.
  3. Copy the CSS on the right (`background-image: radial-gradient(...)`) and paste it into your element's styles.
FAQ
What is a mesh gradient?
It's a gradient made by placing several colors around the canvas so they blend softly into one another. Unlike a normal gradient that goes from one color to another in a straight line, the colors mix in a mesh-like way, giving the rich, modern look you see on SaaS landing pages and hero backgrounds.
Is it pure CSS, or do I need an image?
No image needed. It layers several `radial-gradient` values into `background-image`, so the mesh effect is achieved with CSS alone. Paste the generated code and it works with no extra image files.
How many colors can I add?
As many as you want with the "Add color" button. Each color has its own position (X% / Y%), and you can remove any with the delete button on its row. More colors make a more complex mesh, but three to five is a comfortable range.
Are my colors and settings uploaded anywhere?
No. Generation and the preview run entirely in your browser. The colors, positions and sizes you choose are never uploaded, stored, or sent to a server — the tool is fully local.
Can I use the generated CSS as-is?
Yes. The output is formatted as `background-color` plus `background-image: radial-gradient(...), ...;`, ready to paste into the rule for your element. Use the "Copy" button to copy the whole snippet.