CSS Gradient Generator
Design linear and radial CSS gradients with a visual editor. Add multiple color stops, adjust positions and angles, and preview the result live. Start from beautiful presets or build your own from scratch. Copy the CSS with one click.
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);How it works
The generator builds a standard CSS background property using linear-gradient()
or radial-gradient() syntax. Color stops are sorted by position and interpolated by the
browser's rendering engine for smooth transitions.
For linear gradients, the angle slider controls the direction from 0° (bottom to top) through 90° (left to right) and all the way to 360°. Radial gradients radiate outward from the center in a circle.
The generated CSS is compatible with all modern browsers. For older browser support, you can add
vendor-prefixed versions (-webkit-linear-gradient, etc.), though this is rarely needed today.