CSS Gradient Generator
Generate CSS gradients
Preview
Colors
CSS Code
Frequently Asked Questions
How do I create a CSS gradient?
Select two or more colors, choose a gradient type (linear, radial, or conic), and adjust the angle or position. The generator produces ready-to-use CSS code. Example output: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%).
What types of CSS gradients are available?
Linear gradients transition along a straight line at any angle. Radial gradients radiate from a center point outward. Conic gradients rotate around a center point. The generator supports all three types with multiple color stops.
How do I add multiple color stops to a gradient?
Click on the gradient bar to add new color stops. Each stop has a color and a position (0-100%). Three stops create a smooth transition through three colors. You can drag stops to adjust their positions for custom blending.
What is a gradient angle in CSS?
The angle defines the direction of a linear gradient. 0deg goes bottom to top, 90deg goes left to right, 180deg goes top to bottom. The keyword "to right" equals 90deg. The generator provides both angle and keyword syntax.
Can I create a gradient from an image?
Upload an image and the generator extracts dominant colors to create a matching gradient. This is useful for creating gradient overlays that complement hero images or for deriving brand gradients from photography.