Create CSS gradients visually with multiple colour stops and live preview. Linear, radial, and conic types. Copy CSS or Tailwind classes.
More free utilities you might find useful
Quick answers to common questions
background: linear-gradient(direction, color-stop1, color-stop2, ...); Direction can be 'to right', 'to bottom right', or a degree like '135deg'. Example: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); creates a diagonal purple gradient. Add more colour stops for complex gradients.
A conic gradient rotates around a center point (like a pie chart or colour wheel). Syntax: background: conic-gradient(from 0deg, red, yellow, green, blue, red); Each colour occupies an equal arc by default. Supported in all modern browsers.
Apply gradient to text: (1) background: linear-gradient(...) (2) -webkit-background-clip: text (3) -webkit-text-fill-color: transparent (4) background-clip: text.
Your data is processed entirely in your browser. Nothing is sent to any server.
Presets
Colour Stops
CSS Output
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Tailwind
bg-[linear-gradient(135deg,_#667eea_0%,_#764ba2_100%)]