Color Palettes can copy gradient CSS from visual gradient areas. This makes it easy to test the palette in a website or prototype.
Copy from the full gradient preview
Click the main gradient preview to copy a left-to-right linear-gradient using every palette color.
Copy from gradient combinations
The Gradient Blender creates two-color gradient combinations. Click a gradient card to copy a CSS background: linear-gradient(135deg, color1 0%, color2 100%); declaration.
Use gradients carefully
- Avoid putting small text directly on high-contrast gradients.
- Use overlays when text needs to sit on top.
- Test the gradient on mobile because narrow screens can change where colors appear.
- Keep gradients subtle for professional interfaces and stronger for posters or campaigns.
CSS tip
Paste copied gradients into a CSS variable when you plan to reuse them across multiple components.