Why include the fallback line?

Ancient email clients and browsers drop gradients. The flat background-color above it keeps text readable everywhere.

How do I add a third color stop?

Insert "color X%" between the stops, e.g. linear-gradient(135deg, #a 0%, #b 50%, #c 100%). Even spacing is rarely ideal — weight stops toward the focal color.

Linear or radial — which converts better?

Neither inherently. Radials spotlight (CTAs, badges); linears imply motion and depth (heroes, headers). Match the layout’s focal logic.

CSS Gradient Generator

Produce copy-ready CSS gradients with solid-color fallback for older clients.

Generate CSS gradients instantly. Free linear and radial gradient maker with angle, two colors and copy-ready code.

About CSS Gradients

Produce copy-ready CSS gradients with solid-color fallback for older clients.

Pick two colors, linear or radial, and an angle for linear flows. The output includes a solid fallback declaration first (older clients ignore what they cannot parse and keep the flat color), then the gradient.

Angles run clockwise from 135°-style diagonals; radial blooms from the center. Everything runs in your browser.

Where it is used

Hero backgrounds, buttons, cards, and banners without image assets or design tools.

How to use the CSS Gradients

Start Color (hex) — enter the value (e.g. 3b82f6).
End Color (hex) — enter the value (e.g. 8b5cf6).
Gradient Type — enter the value.
Angle in Degrees (linear only) — enter the value (e.g. 135).
Calculate — press the Calculate button to see the result instantly above.

Formula

linear-gradient(angle, A 0%, B 100%) or radial-gradient(circle, A, B) + fallback.

Examples

Example

colorA:3b82f6

colorB:8b5cf6

kind:linear

angle:135

Result: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)

Frequently Asked Questions

Why include the fallback line?: Ancient email clients and browsers drop gradients. The flat background-color above it keeps text readable everywhere.
How do I add a third color stop?: Insert "color X%" between the stops, e.g. linear-gradient(135deg, #a 0%, #b 50%, #c 100%). Even spacing is rarely ideal — weight stops toward the focal color.
Linear or radial — which converts better?: Neither inherently. Radials spotlight (CTAs, badges); linears imply motion and depth (heroes, headers). Match the layout’s focal logic.

Calculator Inputs