CSS Gradient Generator

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

bg-gradient-to-br from-[#667eea] to-[#764ba2]

What is a CSS gradient?

A CSS gradient is a smooth color transition created entirely with code, no images required. CSS supports three types: linear-gradient (straight line), radial-gradient (from a point), and conic-gradient (rotating around a center). Gradients are resolution-independent, load instantly, and reduce page weight.

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

Linear gradients transition along a straight line at a specified angle. Radial gradients radiate outward from a center point (circle or ellipse). Conic gradients rotate around a center point like a color wheel. Each type creates distinctly different visual effects.

How do I use a CSS gradient in Tailwind?

Tailwind provides bg-gradient-to-{direction} classes with from-{color}, via-{color}, and to-{color} utilities. For custom colors use arbitrary values like from-[#667eea]. For more than 3 stops, use inline styles with the full CSS background property.

Can I use more than 2 colors in a gradient?

Yes, CSS gradients support unlimited color stops. Each stop can have a custom position (percentage or length). This generator supports up to 5 stops, which covers most design needs. More stops create more complex, nuanced transitions.