logoColorTinder

Gradient Generator

Create beautiful CSS and Tailwind gradients with an intuitive visual editor

Type

Angle

135°

Presets

Color Stops

%
%
.element {
  background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
}
linear-gradient(135deg, #6366f1 0%, #ec4899 100%)

Frequently Asked Questions

What is the difference between linear, radial, and conic gradients?

Linear gradients transition colors along a straight line. Radial gradients radiate from a center point outward. Conic gradients rotate colors around a center point, like a color wheel.

How do I use the gradient in Tailwind CSS?

Switch to the Tailwind tab and copy the generated class names. Paste them directly into any Tailwind project — no extra configuration needed for standard colors.

Can I add more than two color stops?

Yes — click 'Add Stop' to add as many stops as you like, then drag or type exact positions to control precisely where each color appears in the gradient.

Can I use the gradient in React or other frameworks?

Absolutely. The CSS output works anywhere you can apply styles, including React inline styles, Vue, Svelte, plain HTML, or any CSS stylesheet.