CSS Gradient Generator
CSS gradients transition between colors. Linear gradients flow in a direction: linear-gradient(to right, #667eea, #764ba2). Radial gradients radiate from center: radial-gradient(circle, #667eea, #764ba2). Control with color stops: linear-gradient(90deg, red 0%, yellow 50%, green 100%). Multiple stops create complex effects. Use for backgrounds, buttons, overlays. Browser support: all modern browsers. Performance: CSS gradients faster than image gradients.
Create beautiful CSS gradients with a visual editor. Supports linear, radial, and conic gradients. Add multiple color stops, drag to reposition, and copy CSS code instantly.
Works OfflineDark ModeNo Ads
Angle
°
Color Stops
#1
%
#2
%
Preset Gradients
Generated CSS
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
Gradient Tips
- Click on the color bar to add new color stops
- Drag the handles to reposition color stops
- Use conic gradients for pie-chart-like effects
- Radial gradients create circular color transitions
- Vendor prefixes ensure compatibility with older browsers
How to Use
- Enter your value in the input field
- Click the Calculate/Convert button
- Copy the result to your clipboard
Frequently Asked Questions
- What types of CSS gradients can I create?
- This tool supports three CSS gradient types: linear gradients (color transitions along a straight line at any angle), radial gradients (color transitions radiating outward from a center point in a circular or elliptical shape), and conic gradients (color transitions rotating around a center point, useful for pie-chart effects and color wheels).
- How do I add or remove color stops?
- Click the "+ Add Color Stop" button or click directly on the color bar to add a new stop at that position. Each stop has a color picker, hex input, and position slider. Drag the handles on the color bar to reposition stops. Click the X button to remove a stop (minimum 2 stops required).
- How do I control the gradient direction?
- For linear gradients, use the angle slider (0-360°) to set the direction. For radial and conic gradients, use the position grid to set the center point (top left, center, bottom right, etc.). Conic gradients also have a starting angle control.
- What are vendor prefixes and do I need them?
- Vendor prefixes (-webkit-, -moz-, -o-) ensure CSS gradients work in older browsers. Modern browsers (Chrome 26+, Firefox 16+, Safari 6.1+) support gradients without prefixes. Enable vendor prefixes only if you need to support very old browsers.
- Can I generate a random gradient?
- Yes! Click the "🎲 Random Gradient" button to generate a random gradient with 2-4 color stops, a random gradient type (linear, radial, or conic), and random angle/position. This is great for inspiration when you are not sure what colors to use.
- How do I use the generated CSS in my project?
- Click "Copy CSS" to copy the generated CSS code to your clipboard. Paste it into your stylesheet as a background property. For example: .my-element { background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); }. The gradient works on any element with a defined size.