Free Gradient Tools
Generators, builders and checkers for everything you make with gradients — backgrounds, text, buttons, loaders and more. Each one gives you code to copy.
Make gradients
Build a gradient from scratch, from a photo or from a single colour.
Gradient GeneratorBuild a linear, radial or conic gradient — up to five stops, CSS, Tailwind and SVG.Animated Gradient GeneratorAdd motion, and get the keyframes with a reduced-motion fallback.Mesh Gradient GeneratorDrag colour points around a canvas, then export PNG or SVG.Tonal Gradient GeneratorTurn one brand colour into a full tonal scale.Gradient from ImageDrop in a photo and turn its colours into a gradient — nothing leaves your browser.Gradient Palette GeneratorTurn a gradient into evenly spaced colours for charts, scales and tokens.Gradient Avatar GeneratorDefault avatars from a name or email — the same name always gets the same gradient.
Backgrounds & effects
Whole-section backgrounds, textures and image treatments.
Glassmorphism BuilderFrosted glass panels — blur, tint and border in one block of CSS.Gradient Wallpaper MakerTurn any gradient into a wallpaper or a looping video background — phone, desktop, web and social sizes.SVG Wave & Blob GeneratorLayered waves, peaks and blobs in your gradient colours — SVG, PNG or a CSS background.Duotone GeneratorRecolour any photo with a gradient — PNG, or a CSS filter that does it live on your site.Aurora Background GeneratorSoft, drifting glows of colour behind your content — pure CSS on one element.CSS Pattern GeneratorStripes, dots, grids and checks in pure CSS, over a gradient or a solid colour.Gradient Overlay GeneratorA gradient over a photo so the text on it stays readable, with the contrast measured.
UI pieces
Gradients on the parts of an interface: text, buttons, borders, glows, loaders.
Gradient Text GeneratorPut a gradient on a headline, with the contrast checked for you.Gradient Border GeneratorGradient borders for buttons, cards and avatars — rounded, animated or glowing, as CSS or Tailwind.Gradient Button GeneratorGradient buttons with hover effects — shift, shine, lift, glow — as CSS or Tailwind.Gradient Shadow GeneratorA soft, coloured gradient glow under cards, images and buttons — pure CSS.Gradient Loader Generator NewLoading spinners in gradient colours — ring, orb, pulse, dots or bar. Pure CSS.
Check
Make sure text on a gradient stays readable.