WerklyTools
Esc
↑↓ navigate↵ open
EN
Buy me a coffee

SVG wave and blob generator

Design wavy section dividers and unique organic shapes. Tweak points, amplitude and colors, regenerate until you like it, and copy the SVG code or download a PNG.

Processed 100% in your browser

How can I verify this?

Your files are never uploaded: they are processed on your device. Check it yourself: load the page, turn off your WiFi and the tool keeps working. Or open your browser’s developer tools (F12), go to the Network tab, and see that no file leaves your device.

Ctrl + Enter runCtrl + C copy result

How to use

  1. 1Choose Wave or Blob.
  2. 2Adjust points, amplitude or randomness.
  3. 3Pick a color or a gradient.
  4. 4Press “New shape” until you find one you like and copy the SVG.

Use cases

  • Create wavy dividers between landing page sections.
  • Generate organic background shapes for cards and heroes.
  • Make lightweight decorative art without heavy images.
  • Get a transparent PNG for presentations.

Frequently asked questions

Why SVG instead of an image?

SVG is vector: it stays sharp at any size, weighs very little and its color can be changed with CSS.

How do I use the code on my site?

Paste it directly into your HTML or save the .svg file and use it as an image or CSS background.

Can I get back a shape I liked?

Copy its SVG code before generating another: each new shape uses a different random seed.

Is anything sent to a server?

No. Everything is generated in your browser.

Related tools

CSS border-radius generatorAdjust the rounding of each corner with sliders and see the result live. Use one radius, one per corner or elliptical radii for organic shapes, in px, % or rem. Copy the CSS when you like it.
CSS box-shadow generatorDesign realistic shadows by stacking several layers, the way the best design systems do. Tune each layer’s offset, blur, spread, color and opacity and copy the result as CSS or as a Tailwind class.
WCAG color contrast checkerChoose your text and background colors and instantly get the contrast ratio and whether it meets the AA and AAA levels of the WCAG accessibility guidelines. If it fails, the tool suggests a similar color that passes. It all happens in your browser.
Color converter (HEX, RGB, HSL, CMYK, OKLCH)Type a color in any format — #hex, rgb(), hsl(), hwb(), oklch() or a name like “tomato” — and instantly get every equivalent, its WCAG contrast against white and black, and a scale of tints and shades.
Color palette generatorStart from your brand color and get a full, perceptually uniform 50 to 950 scale ready for your design system, along with harmonious combinations. Your original color is kept exactly at its matching step.
CSS gradient generatorDesign gradient backgrounds by dragging color stops along a bar, choose the type (linear, radial or conic) and copy production-ready CSS with a fallback color and a modern OKLCH version without grey dead zones.