CSS Gradient Generator
Create beautiful CSS gradients with preview
Gradient settings
Color stops
Color stop 1
Color stop 2
Preset gradients
Gradient tips
Use linear gradients for smooth directional color transitions.
Radial gradients work well for creating spotlight or focus effects.
Conic gradients are perfect for color wheels and angular patterns.
Adjust color stop positions to control the gradient’s color distribution.
Use similar hue colors for subtle gradients or contrasting colors for bold effects.
Live preview
CSS shorthand
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);CSS property
background-image: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);CSS class
.gradient-bg {
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);
}Adjust colors and positions. The preview updates as you work.
About CSS Gradient Generator
Our free CSS gradient generator makes it easy to create beautiful, smooth color transitions for any web project. Build linear gradients, radial gradients, and conic gradients with full control over colors, positions, directions, and angles -- all with a real-time visual preview.
From a subtle two-color hero background to a multi-stop progress bar, you get up to 10 color stops with precise position control. Choose from preset templates like Sunset, Ocean, Forest, and Purple Rain, or use the random generator to discover unique gradient color combinations for your designs.
The generator instantly produces clean CSS gradient code that you can copy or download as a PNG image. Multiple output formats are provided, including background shorthand, background-image property, and a ready-to-use CSS class. Nothing you create is uploaded or stored.
Key Features
- Support for linear, radial, and conic gradient types with full customization
- Up to 10 color stops with individual position control for precise gradient design
- 8 directional presets for linear gradients plus custom angle input
- Radial gradient shape (circle/ellipse) and position controls
- Conic gradient with adjustable start angle for color wheel effects
- 4 built-in preset gradients: Sunset, Ocean, Forest, and Purple Rain
- Random gradient generator for creative inspiration and exploration
- Real-time preview that updates instantly as you adjust settings
- One-click copy with multiple CSS output formats (shorthand, property, class)
- Download gradient as a high-resolution PNG image (800x600)
How to Use the CSS Gradient Generator
- Choose a gradient type: Select Linear, Radial, or Conic from the type selector to set your gradient style.
- Set direction or position: For linear gradients, pick a direction or custom angle. For radial, choose shape and position. For conic, adjust the start angle.
- Add and adjust colors: Use the color pickers to set your gradient colors and drag the position values to control where each color appears.
- Preview in real time: Watch the gradient preview update instantly as you make changes to colors, positions, and settings.
- Copy the CSS code: Click the Copy button to copy the CSS gradient syntax to your clipboard in your preferred format.
- Download as image: Click Download to save your gradient as a PNG image for use in design tools or presentations.
Use Cases
- Website backgrounds: Create eye-catching hero sections, headers, and full-page backgrounds with smooth color transitions.
- Button styling: Design gradient buttons that stand out and guide users toward calls to action.
- Card and component accents: Add gradient borders, overlays, or accent colors to UI cards and components.
- Text effects: Use CSS gradients with background-clip to create colorful gradient text effects.
- Loading indicators: Build animated gradient backgrounds for skeleton screens and loading states.
- Social media graphics: Download gradient images for social media posts, stories, and cover photos.
- Design system colors: Establish consistent gradient tokens for your brand's design language.
- Presentation slides: Create gradient backgrounds for web-based presentations and portfolios.
Frequently Asked Questions
What is the difference between linear, radial, and conic gradients?
Linear gradients transition colors along a straight line in a given direction. Radial gradients emanate from a center point outward in a circular or elliptical shape. Conic gradients sweep colors around a center point like a color wheel.
How many colors can I use in a gradient?
You can use between 2 and 10 color stops in a single gradient. Each stop has its own color picker and position slider for precise control over the transition.
Are CSS gradients supported in all browsers?
Linear and radial gradients are supported in all modern browsers. Conic gradients are also widely supported in current versions of Chrome, Firefox, Safari, and Edge.
Tips & Best Practices
- Use similar hues for subtle effects: Colors that are close on the color wheel create smooth, elegant gradients that feel natural.
- Limit color stops: Two to three colors usually produce the cleanest results. More stops can create muddy transitions if not carefully positioned.
- Set a fallback color: Always include a solid background-color before your gradient declaration for browsers that may not render it.
- Try radial for spotlight effects: Radial gradients work well for drawing attention to the center of a section or highlighting a focal area.
- Test on multiple screens: Gradients can look different on various monitors and mobile screens, so always preview across devices.
- Use the random generator: Click Random to discover unexpected color combinations that you might not have considered.