CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually. Copy the CSS with one click.
About This Tool
CSS Gradient Builder lets you create linear, radial, and conic gradients visually. Add multiple color stops, adjust their positions and colors, set the gradient angle or position, and copy the resulting CSS instantly.
Linear gradients flow in a straight direction at any angle. Radial gradients emit from a center point outward. Conic gradients sweep around a center point - useful for pie charts and color wheels. All three generate valid CSS gradient() syntax.
The live preview updates in real time as you adjust any control. Supports multiple color stops with transparency. The output is clean CSS that works in all modern browsers without vendor prefixes.