Color & toolsFree

Gradient Loom

A browser-based mesh gradient editor that exports CSS, SVG and PNG

About this resource

Gradient Loom lets you place up to 12 color points on a canvas and drag them around to create soft mesh gradients. You can add noise, blur and a slow animation, then export as layered CSS gradients, an SVG under 10 KB or a PNG up to 8K. Every gradient has a shareable URL that encodes its settings.

It's handy for front-end developers building hero backgrounds and designers who want something richer than a two-stop linear gradient. The tool is free with no account, and exported gradients can be used anywhere. The caveat: the CSS export approximates the mesh with stacked radial gradients, so it looks slightly smoother than the canvas preview.

Highlights

  • 01SVG exports under 10 KB
  • 02Settings stored in a shareable URL
  • 03Optional noise to prevent color banding

Tags

Related resources

More in Color & tools
  • An open-source generator for layered, realistic box shadows

    • shadows
    • css
    • open source
    Open sourceFree
  • Rampsmith

    NewFeatured

    Generates accessible 11-step color ramps and checks every pair for contrast

    • color ramps
    • accessibility
    • tokens
    FreemiumFree / $6/mo
  • A Figma plugin that audits every text layer in a file for contrast issues

    • accessibility
    • figma plugin
    • wcag
    Paid$8/mo
Live demo · Sourcefile Club— View template →