For dashboards and data-heavy UI
Build clear hierarchy with dependable contrast, semantic tokens, and readable data colors.
Colors Browser-only processing Updated March 19, 2026
Gradient Generator
Create beautiful CSS gradients with a visual editor. Build linear, radial, and conic gradients with multiple color stops and export to CSS or Tailwind.
Color Stops
%
%
Export Gradient
background: linear-gradient(90deg, #6366F1 0%, #22C55E 100%);How to Use
- Choose a gradient type: linear, radial, or conic
- Adjust the angle for linear/conic gradients
- Click color swatches to change colors
- Adjust position percentages to control color transitions
- Add or remove color stops as needed
- Copy the CSS or Tailwind code
Use Cases
For brand palettes and design systems
Create reusable color scales and exports for CSS variables, Tailwind, and documentation handoff.
Glossary Terms
Frequently Asked Questions
What types of gradients can I create? ▼
You can create linear (straight lines), radial (circular), and conic (angular) gradients. Each type has different use cases for backgrounds and effects.
How do I add more colors? ▼
Click "Add Color Stop" to add up to 5 colors. Each stop can have its own color and position (0-100%).
What does the angle control do? ▼
For linear gradients, angle controls the direction (90° = left to right). For conic gradients, it sets the starting angle. Radial gradients don't use angle.
Can I use these gradients in Tailwind? ▼
Yes! The Tailwind export gives you the appropriate classes. For linear gradients, it uses native Tailwind utility classes when possible.