The Gradients section creates gradient CSS from the selected color. It is useful for backgrounds, hero sections, cards, badges, and visual accents.
Gradient tabs
- Linear: warm, cool, complementary, dark, and light gradient directions.
- Mesh: soft, aurora, and neon-style layered backgrounds.
- Conic: wheel and radar-style gradients, plus radial options.
- Artistic: noise and stripe patterns.
Copying CSS
Each gradient card can copy its CSS. Paste it into a CSS background declaration or adapt it for your component styling system.
Readability warning
Gradients can reduce text readability. Always test text contrast on top of gradient backgrounds before shipping them.