How to copy gradient CSS

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.