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. The Tailwind tab of the code gives you an arbitrary-value class, such as bg-[linear-gradient(...)], ready to use in className. You can also use the generated CSS in an inline style or your own class.

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

Code

Online CSS gradient generator

Frequently Asked Questions