The Gradients section generates CSS backgrounds from the selected color. It is useful for hero backgrounds, cards, overlays, decorative surfaces, and visual experiments.
Gradient tabs
- Linear includes trendy warm, cool, complementary, and duotone directions.
- Mesh creates layered radial-style backgrounds such as soft, aurora, or neon looks.
- Conic includes wheel, radar, and radial spot options.
- Artistic includes texture or pattern styles such as noise and stripes.
Each gradient card shows a live preview and has a copy action for the generated CSS.
Best use
After copying a gradient, test it behind real text and UI. Decorative gradients may need overlay or contrast adjustments.