Gradient Generator
Gradient Type
Settings
Color Stops
Presets
Preview
CSS Code
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
Let us know
Please share your experience
4.9 (2.8k ratings)
About Gradient Generator
Generate CSS gradients instantly and free. Create linear and radial gradients with multiple colors. Customize angle, position, and color stops. Copy CSS code directly. Perfect for web design and UI development. No registration required - works 100% in your browser.
How to Use
Step 1
Select gradient type: Linear, Radial, or Conic
Step 2
Add and customize color stops (minimum 2 colors)
Step 3
Adjust type-specific settings (angle, shape, position)
Step 4
Preview your gradient in real-time
Step 5
Use presets for quick inspiration or generate random gradients
Step 6
Copy the CSS code to use in your projects
Features & Benefits
- ✅3 gradient types: Linear, Radial, and Conic
- ✅Unlimited color stops with position control
- ✅Full customization: colors, angles, shapes, positions
- ✅8 beautiful presets: Sunset, Ocean, Forest, Purple Dream, Fire, Cool Blues, Rainbow, Peach
- ✅Random gradient generator for inspiration
- ✅Real-time preview as you customize
- ✅One-click CSS code copy to clipboard
- ✅Drag sliders to adjust color positions
- ✅100% free - no watermarks, no signup required
- ✅Works offline - all generation happens in your browser
FAQs
What gradient types are supported?
We support 3 CSS gradient types: Linear (straight line gradients with adjustable angle 0-360°), Radial (circular or elliptical gradients from a center point), and Conic (circular gradients that rotate around a center point, perfect for pie charts and color wheels).
How do I add more colors to my gradient?
Click the '+' button in the Color Stops section to add a new color. You can add as many colors as you want. Each color stop has a position slider (0-100%) to control where it appears in the gradient. To remove a color, click the trash icon (minimum 2 colors required).
What's the difference between gradient types?
Linear gradients transition colors in a straight line at a specified angle. Radial gradients radiate from a center point outward in a circle or ellipse. Conic gradients rotate colors around a center point like a color wheel, useful for pie charts and circular designs.
How do I use the generated CSS code?
Click the 'Copy' button to copy the CSS code to your clipboard. Then paste it into your CSS file or style attribute. The code includes the complete background property, for example: background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
Can I save my gradients?
The tool doesn't store gradients, but you can copy the CSS code and save it in your project files. You can also bookmark specific gradient configurations by saving the CSS code in a text file or design system.
What are the preset gradients?
We provide 8 professionally designed gradient presets: Sunset (warm red to yellow), Ocean (deep blue to cyan), Forest (teal to green), Purple Dream (purple to pink), Fire (radial yellow to red), Cool Blues (blue gradient), Rainbow (conic full spectrum), and Peach (soft peach tones). Click any preset to instantly apply it.
How does the random gradient generator work?
Click the 'Random Gradient' button to generate a completely random gradient with 2-4 color stops, random colors, and a random gradient type. It's perfect for finding inspiration or discovering unexpected color combinations.
Can I adjust the position of each color?
Yes! Each color stop has a position slider that controls where the color appears in the gradient (0-100%). Drag the slider or enter a specific value to fine-tune the color transitions. Colors closer together create sharper transitions, while colors farther apart create smoother blends.