Darnly
Free tools

Background generator: waves, blobs and mesh gradients

Make a hero background that doesn’t look like every other AI-built site. Pick a style and colors, press Shuffle, and see it live behind a headline. Download SVG or PNG, or copy CSS and Tailwind.

Free from Darnly. Spot a bug in the app you're building? Darnly hands it to Claude Code, Codex or Cursor in one key.Add to Chrome

Ship your idea this weekend

This sample headline shows how text reads on your background.

Get started

CSS
Tailwind classes · v3 and v4
SVG code
Want to check the rest of your site? Try the AI look checker to find what makes it look AI-made.
More free tools
See all 89 tools
How it works
  1. Pick a style: waves, blobs, mesh gradient, pattern or peaks. The big preview shows it behind a sample headline.
  2. Choose a color set or your own colors, move the Complexity slider, and press Shuffle until you like it.
  3. Download it as SVG or PNG, or copy the CSS, the Tailwind classes, or a prompt for your AI coding agent.
Questions
Can I use these backgrounds for free?
Yes. You make them, so they’re yours to use anywhere, including in paid products. No credit needed.
SVG or PNG, which should I use?
SVG for websites: it stays sharp on every screen and is usually only a few KB. PNG when a tool only takes pictures, like a slide deck or a social post.
Why does the CSS look different for different styles?
Mesh gradients and patterns can be made with plain CSS gradients, so you get short CSS that scales to any size. Waves, blobs and peaks are shapes, so the CSS holds the SVG inside it.
Which Tailwind classes do I get?
Arbitrary classes like bg-[radial-gradient(...)] that work in Tailwind v3 and v4 and match the CSS exactly.
How do I keep my headline readable?
Turn on the sample headline to check. If it’s hard to read, pick a lighter or darker background color, lower the complexity, or flip the waves so they sit away from the text.
Is anything uploaded?
No. The picture is drawn in your browser and never leaves it.