Gradients tools, reviewed on their official site.

CSS generator

Build linear and radial gradients with a visual editor and copy cross-browser CSS output for free, no account needed.

cssgradient.io · Free

Native shaders

Tune live shader effects and export Metal for SwiftUI or Skia for React Native; Pro unlocks the file exports.

metalforge.xyz · Freemium

Collection + classic generator

Browse 180 free linear gradients and copy CSS instantly, or unlock PSD, Sketch, and Figma packs with an Itmeo account.

webgradients.com · Free

CSS generator

Pick two or three colors and an orientation to generate a linear-gradient CSS snippet, free and without signing in.

mycolor.space · Free

Palette gradient generator

Blend multi-stop color gradients and export as CSS, SVG, PDF, or Tailwind config; saving gradients needs a free account.

coolors.co · Freemium

CSS generator

Build linear and radial gradients with a visual editor and copy cross-browser CSS output for free, no account needed.

cssgradient.io · Free

Collection

Browse a community-curated feed of trending color gradients updated daily and grab the ones that fit your palette.

gradienthunt.com · Free

Background generator

Generate SVG or PNG backgrounds — waves, blobs, low-poly grids, and blurry gradients — with no signup and no credit card.

haikei.app · Free

Animated mesh generator

Preview five animated WebGL mesh shaders at 60fps and export PNG for free, or unlock 4K, MP4, and React/CSS code with a paid pass.

instantgradient.com · Freemium

Mesh generator

Randomize a palette into an organic multi-point mesh blend and export it as SVG, PNG, or JPG for hero sections and posters.

magicpattern.design · Pricing unknown

WebGL mesh editor

Drag points on a WebGL canvas to warp organic mesh gradients built from shaders, then export the result as an image.

meshgradient.com · Pricing unknown

CSS mesh generator

Drag control points to shape a mesh gradient and copy the generated CSS — no image export or design file involved.

csshero.org · Free

Native shaders

Tune live shader effects and export Metal for SwiftUI or Skia for React Native; Pro unlocks the file exports.

metalforge.xyz · Freemium

Collection

Scroll a handpicked library of two-color gradients and copy the hex stops or CSS, with a matching Figma plugin.

uigradients.com · Free

Collection + classic generator

Browse 180 free linear gradients and copy CSS instantly, or unlock PSD, Sketch, and Figma packs with an Itmeo account.

webgradients.com · Free