Gradient Generator
Build a linear, radial, or conic gradient, add color stops and set the direction, then copy the CSS in one click.
Every gradient is rendered right in your browser. Nothing you set here is uploaded to BroBroGo.
FAQ
What is the difference between linear, radial and conic gradients?
A linear gradient blends colors along a straight line you aim with an angle. A radial gradient spreads them outward from the center in a circle or ellipse. A conic gradient sweeps them around the center like a color wheel.
What are color stops?
Each color stop is a color pinned to a position along the gradient — 0% at the start, 100% at the end. Move a stop to shift where its color peaks, or add more stops for a richer blend. You can use up to eight.
How do I control the direction?
For a linear or conic gradient, the angle slider sets the direction — 0° points up, 90° points right. A radial gradient has no angle; pick a circle or ellipse shape instead to change how it spreads.