CSS Gradient Generator
Beautiful Gradients Made Easy

Linear gradients transition colors along a straight line at a specified angle. Radial gradients radiate outward from a center point in a circular or elliptical shape. Conic gradients rotate colors around a center point like a color wheel or pie chart.

Click the "Add Stop" button to add additional color stops. You can add up to 10 stops. Each stop has its own color picker and position slider. Click the X button on any stop to remove it (minimum 2 stops required).

Repeating gradients tile the gradient pattern infinitely. This is useful for creating striped patterns, progress bars, or decorative backgrounds. The pattern repeats based on the color stop positions you've defined.

Yes! Switch to the "Tailwind" tab in the output section. For simple two-color linear gradients, you'll get utility classes like bg-gradient-to-br from-[#color] to-[#color]. For complex gradients, you'll get an arbitrary value that can be used with the style attribute.

There's no direct gradient border property in CSS. The common technique is to use a gradient background on a parent element with padding, then place a solid-color child element inside. The "padding" becomes your gradient border.

Yes! Linear and radial gradients have excellent browser support (98%+). Conic gradients are supported in all modern browsers (Chrome, Firefox, Safari, Edge). No vendor prefixes are needed for current browser versions.