Question 1

What does this tool produce?

Accepted Answer

A `background: linear-gradient(…);` or `background: radial-gradient(…);` declaration, ready to paste into a stylesheet. The preview updates live as you change the type, angle, and colour stops, and a Copy button writes the final rule to your clipboard.

Question 2

Why is angle 0 at the top and not the right?

Accepted Answer

CSS gradient angles are measured clockwise from the top of the element: 0deg points up, 90deg points right, 180deg points down, 270deg points left. The most common "brand diagonal" is 135deg, which runs from bottom-left to top-right.

Question 3

Can I animate between two gradients?

Accepted Answer

Not directly — CSS animations cannot interpolate `background-image`, because gradients are images and the browser has no way to tween between them. Animate `background-position` of a single static gradient, or cross-fade two stacked elements with `opacity`.

Question 4

Is anything uploaded?

Accepted Answer

No. The colour math and CSS emission happen entirely in your browser; the only thing that leaves the page is the CSS string you copy yourself.

CSS Gradient Generator

Gradient Controls

Presets

Preview

Mastering CSS Gradients and Color Mixing: Linear, Radial, and Conic

Color Blindness Simulator

Color Contrast Checker

Color Converter

Color Extractor

Color Generator

Color Mixer