Gradient Generator
Create beautiful CSS gradients visually. Linear/radial support, 2-5 color stops, angle control, direction presets, instant CSS code.
Privacy: All gradient generation happens in your browser. No data is sent to any server.
Embed This Tool
Add this tool to your website with customizable styling
How to Use
- 1 Choose your gradient type (Linear or Radial) using the radio buttons at the top.
- 2 Add and customize color stops using the color picker and position slider. Each stop defines a color and where it appears (0-100%).
- 3 For linear gradients, adjust the angle with the slider or use direction presets (To Right, To Bottom, diagonals, etc.).
- 4 Add or remove color stops (2-5 stops supported) to create simple or complex gradients.
- 5 Preview your gradient in real-time in the large preview box.
- 6 Copy the generated CSS code and paste it into your stylesheet or inline styles.
💡 Pro Tip: Use the Randomize button for inspiration! Linear gradients work great for backgrounds and headers, while radial gradients create beautiful spotlight effects for buttons and hero sections.
Frequently Asked Questions
What's the difference between linear and radial gradients?
Linear gradients flow in a specific direction (controlled by the angle), creating a smooth transition from one side to another. Radial gradients radiate from the center outward in a circular pattern. Use linear gradients for backgrounds, headers, and directional effects. Use radial gradients for buttons, spotlight effects, and circular designs.
What are color stops and positions?
Color stops define the colors in your gradient and where they appear. The position (0-100%) determines where each color is placed along the gradient. You can use 2-5 stops to create simple two-color gradients or complex multi-color effects. Placing two stops at the same position creates a sharp color transition instead of a smooth blend.
How do direction presets work?
Direction presets are shortcuts for common gradient angles. "To Right" (90°) flows left to right, "To Bottom" (180°) flows top to bottom, and diagonal options like "To Bottom Right" (135°) create angled effects. These presets make it easy to create standard gradients without manually adjusting the angle slider. For precise control, use the angle slider or number input.
Do CSS gradients work in all browsers?
Yes! CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. The generated CSS code uses the standard syntax that works across all platforms. No vendor prefixes are needed for modern browser support.