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
Similar Tools
135 Degrees Means Top-Left to Bottom-Right
The angle convention confuses everyone once: in CSS, 0deg points up and degrees run clockwise, so the workhorse 135deg gradient flows from the top-left corner to the bottom-right — which is why nearly every diagonal hero background uses that value. Each color stop carries a position from 0-100%: pulling the two stops of a blue-to-purple gradient closer (say 20% and 80%) creates a soft band, while a stop at 0% makes the color start hard at the edge. The Random button jumps between complete palettes when you need a starting point to refine rather than a blank slate.
Banding, Hard Stops, and Dark Mode Twins
Three quality issues separate an amateur gradient from a production one. Subtle gradients on large surfaces can band — visible contour lines — especially on low-bit-depth screens; widening the gap between stops or nudging the two hues apart usually hides it. Placing two different colors at the same position creates a hard stop, which is how stripes are made, not blends. And a gradient tuned for a light page often looks muddy on a dark one: dark mode needs its own pair, typically with more luminous mid-tones, saved as a separate variant.
About Gradient Generator
Gradients have become the default background of the modern web — hero banners, call-to-action buttons, loading screens, card headers — and every one of them is a line of CSS specifying colors, their stop positions, and a direction. Building them by hand-writing that line is possible; iterating on it by eye is faster. The generator exists for the iteration: drag stops, flip between linear and radial, and read the finished CSS straight out of the tool.
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.