Create stunning CSS gradients with our visual editor. Linear, radial, and conic gradients with real-time preview. Export to CSS, Tailwind, or download as image. Free online tool.
linear-gradient(135deg, #6366F1 0%, #EC4899 100%)Randomize will generate 2-4 color stops
Randomize will generate 2-4 color stops
Learn how to apply CSS gradients in real-world design scenarios
Hero sections, landing pages, and app backgrounds
Perfect for hero sections, landing pages, and full-screen app backgrounds. Creates visual depth and modern aesthetic.
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);Call-to-action buttons with eye-catching gradients
Gradient buttons attract attention and improve click-through rates. Ideal for CTAs, sign-up buttons, and primary actions.
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);Eye-catching gradient text for headlines
Gradient text makes headlines pop. Works great for hero titles, feature names, and brand statements.
background-image: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;Subtle gradients for cards and UI surfaces
Subtle gradient background
Subtle gradients add depth to cards without overwhelming. Perfect for feature cards, testimonials, and pricing tables.
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);Gradient borders for modern UI elements
Stand out with colorful borders
Gradient borders make elements stand out. Great for input fields, cards, and featured content sections.
.gradient-border {
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
padding: 2px;
border-radius: 12px;
}
.gradient-border > div {
background: var(--bg-surface);
border-radius: 10px;
}Explore harmonious variations based on your current gradient
Powerful features designed for designers and developers
Create linear, radial, and conic gradients with full control over direction, position, and shape.
Add, remove, and drag color stops on a visual timeline. See changes in real-time as you edit.
Copy clean, cross-browser compatible CSS code instantly. Includes fallback colors for older browsers.
Export gradients as Tailwind CSS classes or config entries for seamless integration.
Browse beautiful pre-made gradients for inspiration. One-click to use as starting point.
Download your gradient as PNG or SVG image for use in design tools or print materials.
Get started in just a few simple steps
Select linear, radial, or conic gradient as your base. Each type offers different visual effects.
Click on the gradient bar to add color stops. Drag them to adjust position and spacing.
For linear gradients, set the angle. For radial, choose the center point and shape.
Click each color stop to pick exact colors. Adjust opacity for transparent effects.
Copy the CSS code, export as Tailwind config, or download as an image file.
Everything you need to know
You can create linear gradients (straight line transitions), radial gradients (circular transitions from a center point), and conic gradients (color transitions around a center point like a color wheel).
Click anywhere on the gradient bar to add a new color stop. You can add as many colors as you need. Drag the stops to adjust their position along the gradient.
Yes! You can download your gradient as a PNG or SVG image. This is useful for design tools, presentations, or any context where you need the gradient as a file.
Yes, the generated CSS includes vendor prefixes and fallback colors for maximum browser compatibility, including older versions of Safari and Firefox.
Yes! Create a free account to save unlimited gradients to your workspace. Access and edit them anytime from any device.
Click on any color stop and adjust the opacity slider. You can create gradients that fade from solid colors to transparency, perfect for overlay effects.
Explore more color tools
CSS Gradient Generator - Create Beautiful Gradients - Free, no signup required
Launch Gradient Generator