Design beautiful CSS gradients with a live visual editor
CSS Gradient Generator
background: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)Tips: Drag handles on the gradient bar to reposition stops. Click an empty area on the bar to add a new stop. The Reverse button flips all stop positions. Use Random for instant inspiration.
Create professional CSS gradients in seconds with our free visual gradient generator. Build linear and radial gradients with unlimited color stops, fine-tune each stop's position and opacity, and get instant CSS output ready to paste into your project. Choose from curated presets or generate a random palette — then copy the CSS property or Tailwind arbitrary class with one click.
A linear gradient transitions colors along a straight line at a set angle — for example, from left to right or diagonally. A radial gradient radiates colors outward from a central point, creating circular or elliptical patterns. Both are widely supported in all modern browsers.
Click anywhere on the gradient bar to add a new color stop at that position. To reposition a stop, drag its handle left or right along the bar. You can also use the sliders or number inputs in the stop list below the bar for precise control.
Yes — switch to the Tailwind tab in the output panel to get an arbitrary-value class like bg-[linear-gradient(...)]. Paste it directly on any element. This requires Tailwind v3 or later with JIT mode, which is the default for new projects.
Select any color stop in the list and use the Opacity slider in the 'Editing Stop' panel below. Reducing opacity below 100% outputs rgba() values, allowing the gradient to blend with whatever is behind the element.