CSS Gradient Generator
Generate CSS gradient code online, supporting linear/radial gradients, multi-color stops with real-time preview and one-click copy.
Preset Gradient Templates
FAQ
What's the difference between linear and radial gradients?
Linear gradients (linear-gradient) transition colors along a straight line, such as from top to bottom or left to right. Radial gradients (radial-gradient) transition colors outward in a circular pattern from a center point. The choice depends on the effect you want—linear gradients are commonly used for backgrounds and buttons, while radial gradients work better for halos and spotlight effects.
What are color stops in a gradient?
Color stops define the color value at a specific position within a gradient. By adjusting each stop's percentage position, you can control when color transitions occur. Multiple stops enable complex gradient effects like rainbows and stripes, making color transitions richer and more natural.
Related guide
Color Converter, Palette Extractor and Gradient Builder: What Each One Changes Without Telling You
All three colour pages accept what you give them and quietly rewrite it. The converter's HEX box parses a number, so #FF0000ff becomes #0000FF; its HSL box rounds, so 89.4% of colours do not survive a HEX→HSL→HEX round trip. The extractor analyses a 4000×3000 photo through five of its 4,000 columns, pins its first cluster centre to the top-left pixel, and reports a 1% accent as 100% because the white it sits on was filtered out. The gradient builder refuses a fifth stop. Every figure below was read out of the pages' own scripts or measured by driving them.