Free Online CSS Gradient Generator

How to use CSS Gradient Generator

1. Choose two colors and a gradient type.
2. Adjust the stop positions; angle applies to linear and conic gradients.
3. Generate a preview and copy the background declaration into your stylesheet.

What this tool does

Build linear, radial and conic CSS gradients with a live preview, two color stops and copyable background CSS.

Your input is processed in your browser and is not uploaded by this tool.

Linear gradients blend along a line, radial gradients expand outward, and conic gradients rotate around the center. Stop positions determine where each color is anchored. The first stop must not exceed the second. Equal stops create a hard color transition, which can be useful for striped backgrounds.

Before you start

• No account is required to open the tool.
• Check the supported input formats and limits on the tool page.
• Review generated or estimated results before relying on them.