CSS gradient generator
Pick the gradient type, colors and stop positions to get a background property with a fallback color.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter gradient type, angle (linear and conic), first color, first color stop, second color and second color stop.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
Linear: linear-gradient(angle deg, color1 stop1%, color2 stop2%). Radial: radial-gradient(circle or ellipse, colors and stops). Conic: conic-gradient(from angle deg, colors and stops). The fallback is the first color.
Example
Inputs: Gradient type = Linear, Angle (linear and conic) = 135 deg, First color = #0f766e, First color stop = 0 %, Second color = #22c55e. Result: CSS code: background-color: #0f766e; background-image: linear-gradient(135deg, #0f766e 0%, #22c55e 100%);.
#0f766e
background-color: #0f766e; background-image: linear-gradient(135deg, #0f766e 0%, #22c55e 100%);
Limits and caveats
- Colors must be HEX; names such as red are not accepted.
- The third color goes at the end; with no stop given, the browser places it automatically.
Questions about this tool
What does 90deg mean in a linear gradient?
The gradient runs left to right; 180deg runs top to bottom and 0deg bottom to top.
Why is there a background-color line?
It is a fallback shown if the gradient does not load, and it helps keep text on top readable.
How do I get a hard edge between two colors?
Give both colors the same stop, such as 50% and 50%, so the change happens with no blending.