{"$schema":"https://toolsly.tools/schemas/tool-manifest-v1.json","generated":"2026-05-20T20:47:38.302Z","discovery":{"catalog":"https://toolsly.tools/tools.json","llmsTxt":"https://toolsly.tools/llms.txt","sitemap":"https://toolsly.tools/sitemap.xml"},"relatedTools":[{"slug":"color-converter","name":"Color Converter","url":"https://toolsly.tools/color-converter"},{"slug":"complementary-color","name":"Complementary Color Generator","url":"https://toolsly.tools/complementary-color"},{"slug":"triadic-colors","name":"Triadic Colors Generator","url":"https://toolsly.tools/triadic-colors"},{"slug":"analogous-colors","name":"Analogous Colors Generator","url":"https://toolsly.tools/analogous-colors"},{"slug":"shade-tint-generator","name":"Shade & Tint Generator","url":"https://toolsly.tools/shade-tint-generator"},{"slug":"random-color","name":"Random Color Generator","url":"https://toolsly.tools/random-color"},{"slug":"wcag-contrast-checker","name":"WCAG Contrast Checker","url":"https://toolsly.tools/wcag-contrast-checker"},{"slug":"color-name-finder","name":"Color Name Finder","url":"https://toolsly.tools/color-name-finder"}],"kind":"utility","slug":"gradient-generator","name":"CSS Gradient Generator","description":"Build a linear or radial CSS gradient between two colors with custom angle and stop count.","longDescription":"Generate CSS gradients (linear or radial) between two colors with full control over the angle (for linear) and the number of color stops. The tool interpolates intermediate stops in HSL space using the shortest hue path — producing smoother transitions than naive RGB interpolation, especially for hue-shifting gradients. Output is a ready-to-paste `background:` declaration plus a best-effort Tailwind class. Stop count between 2 and 8. All math is local — your colors never leave the browser.","category":"color","categoryName":"Color","keywords":["gradient generator","css gradient generator","linear gradient css","radial gradient css","gradient maker online","gradient builder","css gradient builder","two color gradient","gradient color stops","tailwind gradient class","gradient generator free","gradient css copy paste"],"badge":"Generator","url":"https://toolsly.tools/gradient-generator","inputs":[{"type":"text","key":"start","label":"Start color","placeholder":"#3b82f6","defaultValue":"#3b82f6","monospace":true},{"type":"text","key":"end","label":"End color","placeholder":"#ec4899","defaultValue":"#ec4899","monospace":true},{"type":"select","key":"type","label":"Gradient type","defaultValue":"linear","choices":[{"value":"linear","label":"Linear"},{"value":"radial","label":"Radial"}]},{"type":"number","key":"angle","label":"Angle (deg)","defaultValue":90,"min":0,"max":360,"step":1,"help":"Only used for linear gradients (0 = bottom→top, 90 = left→right)."},{"type":"number","key":"stops","label":"Stop count","defaultValue":2,"min":2,"max":8,"step":1}],"outputs":[{"key":"css","label":"CSS","multiline":true},{"key":"tailwindClass","label":"Tailwind (closest)"},{"key":"preview","label":"Interpolated stops","multiline":true}],"invocation":{"webUi":"https://toolsly.tools/gradient-generator","api":null,"notes":"Currently invoked via the web UI at `webUi`. Inputs are form fields; outputs are structured text values. A remote MCP/REST API is planned."}}