Create beautiful CSS gradients with a visual editor. Use presets, adjust stops, and export as CSS, inline style, or Tailwind config.
Click to add · Drag to reposition · Arrow keys to fine-tune
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);background: "linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%)"backgroundImage: {
'gradient': 'linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%)'
}linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%)Explore these related free tools to enhance your productivity and workflow.
Click anywhere on the gradient bar to add a new color stop. Drag existing handles to reposition them. Click a handle to select it and edit its color below.
Yes! The URL updates automatically as you edit. Copy and share it directly—recipients will see your exact gradient configuration.
Use the 'Tailwind' copy button to get a backgroundImage config snippet. Paste it into your tailwind.config.js under theme.extend.
Linear gradients transition colors along a straight line at a specified angle. Radial gradients transition colors outward from a center point in a circular pattern.