Question 1

What is a CSS gradient?

Accepted Answer

A CSS gradient is a smooth transition between two or more colors applied as a background. It's implemented via the linear-gradient(), radial-gradient() or conic-gradient() functions and supports multiple stops with percentage positions.

Question 2

Linear, radial or conic: which to use?

Accepted Answer

Linear transitions in one direction (defined by an angle). Radial radiates from a central point, creating a halo effect. Conic rotates around a point, useful for circular indicators or color wheels.

Question 3

Can I use this with Tailwind?

Accepted Answer

Yes. You can paste the generated CSS directly as an inline style (style={'{ background: ... }'}) or create a custom utility class in your tailwind.config.

Question 4

Does it work in all browsers?

Accepted Answer

linear-gradient and radial-gradient have universal support (>97% coverage). conic-gradient is broadly supported in modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+).

Question 5

Is my data sent to any server?

Accepted Answer

No. All generation and preview happens locally in your browser. No color, code, or input is sent to any server.

Gradient Generator

Online CSS gradient generator

Frequently Asked Questions