How to Use
Learn how to create beautiful CSS gradients in just a few simple steps.
Step 1
Choose Gradient Type
Select between linear gradient (straight line) or radial gradient (circular). Linear gradients are great for backgrounds, while radial gradients work well for spotlight effects.
Step 2
Customize Colors
Click on the color picker to choose your colors, or enter hex codes directly. Add up to 5 color stops and adjust their positions using the percentage slider.
Step 3
Copy CSS Code
Once you're happy with your gradient, click the "Copy" button to copy the CSS code. Paste it into your stylesheet or inline styles.
Step 4
Access History
Your recent gradients are automatically saved. Click on any gradient in the history section to load it back into the editor.
Pro Tips
- Use the "Random" button to get inspiration for new color combinations.
- For subtle gradients, use colors that are close to each other on the color wheel.
- Add a middle color stop at 50% to create a smoother transition.
- Use 45° or 135° angles for diagonal gradients that look great on buttons.