Gradient

Build CSS gradients visually.

A free CSS gradient generator: adjust the two endpoint colors, linear/radial type and angle visually, preview live, and get copy-ready CSS gradient code. It all runs locally in your browser.

How to use

1. Choose the start and end colors.
2. Pick the type: linear or radial.
3. For a linear gradient, adjust the angle in degrees.
4. Copy the generated CSS into your stylesheet.

FAQ

What CSS does it produce?

A linear gradient outputs linear-gradient(<angle>deg, c1, c2); a radial gradient outputs radial-gradient(circle at 50% 50%, c1, c2) — both ready to use as a background.

How does the angle work?

It follows the CSS convention: 0deg goes bottom-to-top, 90deg left-to-right, 180deg top-to-bottom, and so on.

Can it do gradients with more than two colors?

This tool focuses on the common two-color case; for multi-stop gradients you can add more color stops to the generated CSS by hand.

Related tools

• Color Convert — Convert HEX / RGB / HSL & more.
• Palette — Generate color schemes fast.
• Contrast — Check WCAG color contrast.
• 2FA Authenticator — End-to-end encrypted 2FA vault with live codes.
• Password Vault — Zero-knowledge vault for site logins; survives password changes.
• Data Format — Convert between JSON, YAML, TOML, CSV.