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.
• Request Echo — See what the server actually received: every header, the real IP, the proxy chain.
• HTTP Testbed — Return any status, delay, redirect or payload size to exercise client retry and timeout logic.
• Webhook Box — Generate a temporary URL to capture third-party callbacks and inspect headers and body in full.