Create beautiful linear and radial gradients. Copy the CSS code instantly.
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Presets
A linear gradient transitions colors along a straight line. Use the direction presets or type a custom angle (0° = top, 90° = right, 180° = bottom). Great for backgrounds, buttons, and hero sections.
A radial gradient radiates outward from a center point. Choose between ellipse (default) or circle shape. Works well for spotlight effects, glows, and circular design elements.
Each stop has a color and a position (0%–100%). Add up to 8 stops for complex multi-color gradients. Drag the slider to control where each color appears in the gradient.
Copy the generated CSS and paste it directly into your stylesheet. Works in all modern browsers. For Tailwind CSS, paste the value as a JIT arbitrary value: bg-['linear-gradient(...)']