Question 1

How do I create a gradient in CSS?

Accepted Answer

Use the linear-gradient() function: background: linear-gradient(angle, color1, color2). Example: background: linear-gradient(135deg, #4f46e5, #7c3aed). The generator creates this for you visually — adjust the angle, color stops, and copy the CSS.

Question 2

Can I add more than two colours?

Accepted Answer

Yes. Add multiple colour stops: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%). The percentages define where each colour is placed along the gradient axis.

Question 3

How do I use a gradient as a background in Tailwind CSS?

Accepted Answer

Tailwind supports gradients with bg-gradient-to-{direction} and from-{colour} via-{colour} to-{colour} utilities. For custom gradients not in the palette, use a [background:linear-gradient(...)] arbitrary value or add it to your tailwind.config.

Question 4

Is my data safe here?

Accepted Answer

Yes. Generation runs in your browser. Nothing is sent to a server.

CSS Gradient Generator

CSS gradient generator

CSS Gradient Generator

Related tools

CSS gradient generator