CSS Gradient Generator

Create beautiful linear, radial, and conic CSS gradients. Add multiple color stops, adjust angle and position. Copy the CSS code instantly.

Type

Angle

135°

Color Stops

Generated CSS

Presets

About CSS Gradient Generator

Generate CSS gradient code for linear, radial, and conic gradients with unlimited color stops. Use presets for quick inspiration or build your own from scratch. The output is production-ready CSS you can paste directly into your stylesheet.

Gradient Types

Linear — colors transition along a straight line at any angle · Radial — colors radiate outward from a center point · Conic — colors rotate around a center point (like a pie chart)

Frequently Asked Questions

Click "Copy CSS" to copy the full CSS rule (e.g. background: linear-gradient(...);), then paste it into your stylesheet or a style attribute. Alternatively copy just the background value.

Yes — click "Add Color Stop" to add as many stops as you like. Each stop has a color and a position (0–100%). You can remove any stop with the × button.

A conic gradient transitions colors around a center point rather than from it. It's useful for pie charts, color wheels, and decorative effects. It was added to CSS in 2021 and is supported by all modern browsers.

Linear and radial gradients are supported in all modern browsers. Conic gradients are supported in Chrome, Firefox, Safari, and Edge — but not in older Internet Explorer. No vendor prefixes are needed for modern browsers.