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
  • Penumbra

    Color & tools

    Open source

    An open-source generator for layered, realistic box shadows

    Free4.7
    • shadows
    • css
  • Rampsmith

    Color & tools

    Freemium

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

    Free / $6/mo4.8
    • color ramps
    • accessibility
  • Contrast Ledger

    Color & tools

    Paid

    A Figma plugin that audits every text layer in a file for contrast issues

    $8/mo4.6
    • accessibility
    • figma plugin
Live demo · The Asset Drawer— View template →