Gradient
Previewlinear
Live CSS gradient
Tune color stops, direction, and type, then copy production-ready CSS for backgrounds, overlays, and surfaces.
linear-gradient(135deg, #111827 0%, #2563EB 52%, #F59E0B 100%)
Color stops
CSS export
.surface {
background: linear-gradient(135deg, #111827 0%, #2563EB 52%, #F59E0B 100%);
}Overview
Create gradients visually with multiple color stops, angle control, and instant CSS export. Copy individual HEX values and final gradient code.
Design linear, radial, and conic gradients with CSS export and copyable hex stops.
Common workflows
- Generate shades, tints, and alternate color formats from one base color.
- Build palette harmonies and compare them in a UI preview before exporting values.
- Create CSS-ready gradients, radius values, shadow layers, and typography scales for frontend implementation.
FAQ
What gradient types are supported?
You can create linear, radial, and conic gradients with adjustable stops and direction controls.
Can I export the final CSS?
Yes. The final gradient can be copied as a ready-to-use CSS background declaration.