[{"data":1,"prerenderedAt":117},["ShallowReactive",2],{"tool-content-en-gradient-generator":3},{"id":4,"title":5,"body":6,"description":108,"extension":109,"locale":110,"meta":111,"navigation":112,"path":113,"seo":114,"stem":115,"toolId":12,"__hash__":116},"tools\u002Ftools\u002Fen\u002Fgradient-generator.md","Gradient Generator",{"type":7,"value":8,"toc":102},"minimark",[9,13,30,57,60,63,67,99],[10,11,5],"h2",{"id":12},"gradient-generator",[14,15,16,17,21,22,25,26,29],"p",{},"Build CSS gradients visually and export ready-to-use code. Pick a type — ",[18,19,20],"strong",{},"linear",", ",[18,23,24],{},"radial",", or ",[18,27,28],{},"conic"," — then tune the parameters that apply:",[31,32,33,37,54],"ul",{},[34,35,36],"li",{},"Linear: rotation angle (0–360°).",[34,38,39,40,21,44,21,47,21,50,53],{},"Radial: circle or ellipse shape, edge size (",[41,42,43],"code",{},"closest-side",[41,45,46],{},"closest-corner",[41,48,49],{},"farthest-side",[41,51,52],{},"farthest-corner","), and center position.",[34,55,56],{},"Conic: start angle and center position.",[14,58,59],{},"Edit the color stops on the gradient bar: click an empty spot to add a stop (its color is sampled from the gradient), drag a node to move it, or refine each stop below with its color, an optional 8-digit hex alpha, and an exact position. Stops can share a position to create a crisp boundary.",[14,61,62],{},"A random button generates fresh gradients in any, vivid, pastel, or grayscale styles. Semi-transparent stops are previewed against a checkerboard.",[10,64,66],{"id":65},"export","Export",[31,68,69,79,89],{},[34,70,71,74,75,78],{},[18,72,73],{},"CSS declaration",": ",[41,76,77],{},"background: linear-gradient(…);"," ready to paste.",[34,80,81,84,85,88],{},[18,82,83],{},"Tailwind class",": the same gradient as an arbitrary-value class, e.g. ",[41,86,87],{},"bg-[linear-gradient(135deg,#4b5563_0%,#e5e7eb_100%)]",".",[34,90,91,94,95,98],{},[18,92,93],{},"Tailwind config",": the stop colors as a ",[41,96,97],{},"colors.gradient"," theme snippet.",[14,100,101],{},"Everything runs locally in your browser.",{"title":103,"searchDepth":104,"depth":104,"links":105},"",2,[106,107],{"id":12,"depth":104,"text":5},{"id":65,"depth":104,"text":66},"Design CSS gradients with draggable color stops and export CSS, Tailwind, and config.","md","en",{},true,"\u002Ftools\u002Fen\u002Fgradient-generator",{"title":5,"description":108},"tools\u002Fen\u002Fgradient-generator","RpnL-CvqkA4Y9YgaaIHSUx8rDkdCXugtQuQieQMwqOQ",1792391417765]