CSS Gradient Generator
Create beautiful CSS gradients with live preview
How to use CSS Gradient Generator
Create beautiful CSS linear and radial gradients with live preview. Copy the CSS code instantly. Free online gradient generator.
What are CSS gradients used for?
CSS gradients create smooth color transitions directly in the browser, without loading image files. They are a cornerstone of modern web design — enabling rich visual effects with zero extra HTTP requests.
- Hero section backgrounds: Full-width gradient backgrounds on landing pages create visual impact without images. A linear gradient from brand primary to secondary color establishes immediate visual identity.
- Button styling: Gradient backgrounds on buttons (call-to-action, primary actions) add depth and visual weight.
background: linear-gradient(135deg, #7B35F5, #C040A0) - Text gradients: Apply gradients to text using
background-clip: textand-webkit-text-fill-color: transparent— creates visually striking headings. - Overlay effects: A semi-transparent gradient overlay on an image (from transparent to black) improves text legibility without blocking the image.
- Progress bars and data visualization: Gradient fills in progress bars and chart elements make data more visually appealing.
Gradient types: linear-gradient(direction, color1, color2) for directional gradients. radial-gradient(shape, color1, color2) for circular/elliptical gradients. conic-gradient(color1, color2) for pie-chart-style rotational gradients (CSS4).
Frequently Asked Questions
What is the difference between linear, radial, and conic gradients?
Linear gradients transition colors along a straight line (top to bottom, left to right, or any angle). Radial gradients radiate from a center point outward in a circle or ellipse. Conic gradients transition colors around a center point — like the face of a color wheel or pie chart. Each creates a fundamentally different visual effect.
How do I create a gradient that repeats?
Use repeating-linear-gradient() or repeating-radial-gradient(). Specify the gradient with a defined length: repeating-linear-gradient(45deg, red 0px, red 10px, blue 10px, blue 20px) creates diagonal stripes. Without a defined pattern size, repeating gradients behave like regular gradients.
Can gradients be animated with CSS?
Gradients themselves cannot be directly transitioned with CSS transition — background-image is not animatable. Workarounds: use background-position with a larger background-size, or use CSS custom properties (variables) for the colors and transition those. The most common approach is fading opacity between two gradient layers.
What does the gradient angle mean?
The angle in linear-gradient is measured clockwise from the top. 0deg goes upward (bottom to top). 90deg goes right (left to right). 180deg goes downward (top to bottom). 45deg goes diagonally down-right. You can also use directional keywords: to top, to bottom, to right, to bottom right, etc.
How do I make a gradient with multiple color stops?
Add more color values separated by commas: linear-gradient(135deg, #ff0000 0%, #ff8800 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). The percentage controls where each color appears. Without percentages, stops are evenly distributed. Color stops can overlap to create sharp transitions instead of smooth blends.
CSS gradients vs SVG gradients vs image gradients
CSS gradients require no external files, scale perfectly, and are easy to animate. They are the first choice for backgrounds and simple effects. SVG gradients can be applied to SVG shapes and paths — more flexible for complex vector graphics. Image gradients (PNG, JPG) are necessary for very complex effects that CSS cannot reproduce — textured gradients, noise overlays, or gradients with complex shapes. For web backgrounds and UI elements, CSS gradients are always preferred over images for performance.