CSS Gradient Generator — Linear, Radial & Conic with Live Preview
Create CSS gradients visually with multiple colour stops and live preview. Linear, radial, and conic types. Copy CSS or Tailwind classes.
Presets
Colour Stops
CSS Output
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Related Tools
More free utilities you might find useful
Frequently Asked Questions
Quick answers to common questions
What is the CSS syntax for a linear gradient?+
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.
What is a conic gradient in CSS?+
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.
How do I add a gradient to text in CSS?+
Apply gradient to text: (1) background: linear-gradient(...) (2) -webkit-background-clip: text (3) -webkit-text-fill-color: transparent (4) background-clip: text.